Spaces:

malteos
/

some-tests

Running

File size: 6,294 Bytes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Common Crawl citations</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
<link rel="stylesheet" href="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.css" />
<link rel="stylesheet" href="./style.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />

<script>
// Global variables for marker filtering
var allMarkers = [];
var activeLabelFilter = null;

var legendExpanded = false;

function toggleLegend() {
	legendExpanded = !legendExpanded;
	[].forEach.call(document.querySelectorAll('.legend-more'), function (el) {
		el.style.display = legendExpanded ? 'inline' : 'none';
	});
	document.getElementById('legendToggleMore').style.display = legendExpanded ? 'none' : 'inline';
	document.getElementById('legendToggleLess').style.display = legendExpanded ? 'inline' : 'none';
}

function toggleLabelFilter(labelIndex) {
	// Toggle the filter
	if (activeLabelFilter === labelIndex) {
		// Clicking the same label again - deactivate filter
		activeLabelFilter = null;
	} else {
		// Activate filter for this label
		activeLabelFilter = labelIndex;
	}

	// Update marker visibility
	for (let i = 0; i < allMarkers.length; i++) {
		var marker = allMarkers[i];
		if (activeLabelFilter === null) {
			// Reset to default state
			marker.marker.setStyle({opacity: 1, fillOpacity: 0.2, radius: 5, weight: 1});
		} else if (marker.labelIndex === activeLabelFilter) {
			// Highlight selected markers
			marker.marker.setStyle({opacity: 1, fillOpacity: 0.8, radius: 7, weight: 2});
		} else {
			// Fade inactive markers
			marker.marker.setStyle({opacity: 0.1, fillOpacity: 0.05, radius: 5, weight: 1});
		}
	}

	// Update legend visual state
	var legendItems = document.querySelectorAll('.legend-item');
	for (let i = 0; i < legendItems.length; i++) {
		if (activeLabelFilter === null) {
			legendItems[i].classList.remove('legend-inactive');
			legendItems[i].classList.remove('legend-active');
		} else if (i === activeLabelFilter) {
			legendItems[i].classList.add('legend-active');
			legendItems[i].classList.remove('legend-inactive');
		} else {
			legendItems[i].classList.add('legend-inactive');
			legendItems[i].classList.remove('legend-active');
		}
	}
}

document.addEventListener('DOMContentLoaded', function() {
	// your code here
	document.getElementById('loading').style.display = 'none';

	//sample data values for populate map
	var _data = [];

	// Calculate center as the mean of all locations
	var sumLat = 0, sumLng = 0;
	for (let i = 0; i < data.length; i++) {
		sumLat += data[i].loc[0];
		sumLng += data[i].loc[1];
	}
	var centerLat = sumLat / data.length;
	var centerLng = sumLng / data.length;

	var map = new L.Map('map', {
		zoom: 6,
		zoomControl: false,
		center: new L.latLng([centerLat, centerLng])
	});	//set center from mean of all locations
	L.control.zoom({
		position: 'topright'
	}).addTo(map);

	var markersLayer = new L.LayerGroup();	//layer contain searched elements

	map.addLayer(markersLayer);

	var controlSearch = new L.Control.Search({
		position:'topleft',
		collapsed: false,
		textPlaceholder: 'Search papers ...',
		layer: markersLayer,
		initial: false,
		zoom: 12,
		marker: false,
	});

	map.addControl( controlSearch );

	// Populate map with markers from loaded data including a legend
	var legendHtml = '<b>Legend:</b> '
	var moreFrom = 15;

	// Legend for labels
	for (let i = 0; i < labels.length; i++) {
		if (i >= moreFrom) {
			cls = 'legend-more';
		} else {
			cls = '';
		}

		// Legend item - now clickable
		legendHtml += '<span class="legend-item ' + cls +'" onclick="toggleLabelFilter(' + i + ')" style="cursor: pointer;"><span class="legend-icon" style="background: ' + colors[i]+ '"></span>' + labels[i] + '</span> ';
	}

	// Add toggle links - "more" visible by default, "less" hidden
	legendHtml += '<a href="javascript:void(0);" id="legendToggleMore" onclick="toggleLegend();">more ...</a>';
	legendHtml += '<a href="javascript:void(0);" id="legendToggleLess" onclick="toggleLegend();" style="display: none;">less ...</a>';

	document.getElementById('legendContainer').innerHTML = legendHtml;


	// Add markers to map
	for(i in data) {
		var title = data[i].title,	//value searched
			loc = data[i].loc,		//position found
			abstract =  data[i].abstract,
			venue =  data[i].venue,
			authors =  data[i].authors,
			label = data[i].label
			url = data[i].url

		if (url == '') {
			url = 'https://github.com/commoncrawl/cc-citations'
		}

		if (!abstract) {
			abstract = "<i>No abstract available.</i>";
		}

		if (!venue) {
			venue = "<i>Unknown</i>";
		}

		// Circle marker with popup on click / tooltip
		marker = new L.circleMarker(new L.latLng(loc), {title: title, radius: 5, className: 'label-' + label} );
		marker.bindPopup('<b><a href="'+ url + '">' + title + '</a></b> [' + labels[label] + '] <i>' + authors + '. Published at ' + venue + ':<br />' + abstract );
		marker.bindTooltip(title)
		marker.setStyle({color: colors[label], opacity: 1, fillOpacity: 0.2, weight: 1});

		markersLayer.addLayer(marker);

		// Store marker with its label for filtering
		allMarkers.push({marker: marker, labelIndex: label});
	}

}, false);
</script>
</head>
<body>

<div id="header">
	<h1>Common Crawl citations</h1>
	<a href="https://github.com/commoncrawl/cc-citations" target="_blank">Scientific articles using or citing Common Crawl data</a>. Built with <a href="https://github.com/malteos/scincl" target="_blank">SciNCL</a>, 
	<a href="https://github.com/lmcinnes/umap"  target="_blank">UMAP</a>, and <a href="https://scikit-learn.org/stable/modules/generated/sklearn.decomposition.LatentDirichletAllocation.html" target="_blank">LDA</a>. 

	<div id="legendContainer"></div>
</div>

<div id="loading">
	<h2>Loading ...</h2>
</div>

<div id="mapContainer">
	<div id="map"></div>
</div>

<script src="./papers.js"></script>
<script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
<script src="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.js"></script>

</body>
</html>