Spaces:
Running
Running
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>EMNLP 2022 papers on a map</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/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> | |
| function showFullLegend() { | |
| [].forEach.call(document.querySelectorAll('.legend-more'), function (el) { | |
| el.style.display = 'inline'; | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // your code here | |
| document.getElementById('loading').style.display = 'none'; | |
| //sample data values for populate map | |
| var _data = []; | |
| var map = new L.Map('map', { | |
| zoom: 7, | |
| zoomControl: false, | |
| center: new L.latLng([4, 7]) // data[0].loc | |
| }); //set center from first location | |
| L.control.zoom({ | |
| position: 'topright' | |
| }).addTo(map); | |
| // map.addLayer(new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer | |
| 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 sample data | |
| var colors = [ | |
| "#63b598", "#ce7d78", "#ea9e70", "#a48a9e", "#c6e1e8", "#648177", "#0d5ac1", | |
| "#f205e6", "#1c0365", "#14a9ad", "#4ca2f9", "#a4e43f", "#d298e2", "#6119d0", | |
| "#d2737d", "#c0a43c", "#f2510e", "#651be6", "#79806e", "#61da5e", "#cd2f00", | |
| "#9348af", "#01ac53", "#c5a4fb", "#996635", "#b11573", "#4bb473", "#75d89e", | |
| "#2f3f94", "#2f7b99", "#da967d", "#34891f", "#b0d87b", "#ca4751", "#7e50a8", | |
| "#c4d647", "#e0eeb8", "#11dec1", "#289812", "#566ca0", "#ffdbe1", "#2f1179", | |
| ]; | |
| var legendHtml = '<b>Legend:</b> ' | |
| var moreFrom = 10; | |
| for (let i = 0; i < labels.length; i++) { | |
| if (i >= moreFrom) { | |
| cls = 'legend-more'; | |
| } else { | |
| cls = ''; | |
| } | |
| legendHtml += '<span class="legend-item ' + cls +'"><span class="legend-icon" style="background: ' + colors[i]+ '"></span>' + labels[i] + '</span> '; | |
| if (i == moreFrom) { | |
| legendHtml += '<a href="javascript:showFullLegend();">...</a>'; | |
| } | |
| } | |
| document.getElementById('legendContainer').innerHTML = legendHtml; | |
| for(i in data) { | |
| var title = data[i].title, //value searched | |
| loc = data[i].loc, //position found | |
| abstract = data[i].abstract, | |
| track = data[i].track, | |
| authors = data[i].authors, | |
| label = data[i].label | |
| url = data[i].url | |
| if (url == '') { | |
| url = 'https://2022.emnlp.org/#unavailable' | |
| } | |
| // circleMarker, Marker | |
| marker = new L.circleMarker(new L.latLng(loc), {title: title, radius: 5, className: 'label-' + label} );//se property searched | |
| marker.bindPopup('<b><a href="'+ url + '">' + title + '</a></b> [' + track + '] <i>' + authors + ':<br />' + abstract ); | |
| //marker.setStyle({fillColor: colors[label]}); | |
| marker.bindTooltip(title) | |
| marker.setStyle({color: colors[label]}); | |
| markersLayer.addLayer(marker); | |
| } | |
| }, false); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="header"> | |
| <h1>EMNLP 2022 Papers</h1> | |
| Embeddings generated with <a href="https://github.com/malteos/scincl" target="_blank">SciNCL (EMNLP paper)</a> | |
| and <a href="https://github.com/lmcinnes/umap" target="_blank">UMAP</a>. | |
| Created by <a href="https://www.linkedin.com/in/malteschwarzer/" target="_blank">Malte Ostendorff</a> | |
| <a href="https://twitter.com/xyou" target="_blank">(@XYOU)</a>. | |
| <div id="legendContainer"></div> | |
| </div> | |
| <div id="loading"> | |
| <h2>Loading ...</h2> | |
| </div> | |
| <div id="mapContainer"> | |
| <div id="map"></div> | |
| </div> | |
| <script src="./papers_with_urls.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <script src="https://opengeo.tech/maps/leaflet-search/src/leaflet-search.js"></script> | |
| </body> | |
| </html> | |