diff options
| author | BonfaceKilz | 2020-06-17 18:54:58 +0300 |
|---|---|---|
| committer | BonfaceKilz | 2020-06-17 18:54:58 +0300 |
| commit | a80646c6d6f2d768f63db2545f7e1542ea290f77 (patch) | |
| tree | 0cd19b261bdb41c05eb154a0c058abdc503ab450 | |
| parent | 81230deb1ff6ec179cd84ecdeaf9ae891b256d55 (diff) | |
| download | bh20-seq-resource-a80646c6d6f2d768f63db2545f7e1542ea290f77.tar.gz bh20-seq-resource-a80646c6d6f2d768f63db2545f7e1542ea290f77.tar.lz bh20-seq-resource-a80646c6d6f2d768f63db2545f7e1542ea290f77.zip | |
Add cluster marker group
When markers are close together, lump them together. Also, it provides a
convenient method of remove markers when loading other GPS co-ordinates
| -rw-r--r-- | bh20simplewebuploader/static/main.js | 18 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/header.html | 12 |
2 files changed, 29 insertions, 1 deletions
diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js index 0556fb7..149eb3c 100644 --- a/bh20simplewebuploader/static/main.js +++ b/bh20simplewebuploader/static/main.js @@ -23,15 +23,31 @@ L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { subdomains: ['a','b','c'] }).addTo( map ); +let markers = L.markerClusterGroup().addTo(map) + + function fetchAPI(apiEndPoint) { fetch(scriptRoot + apiEndPoint) .then(response => { return response.json(); }) .then(data => { - console.log(data); + markers.clearLayers(); document.getElementById("results").classList.remove("invisible"); document.getElementById("loader").classList.add("invisible"); + if (!(apiEndPoint === "/api/getAllaccessions")) { + for (let i = 0; i < data.length; i++) { + let {"Fasta Count": fastaCount, GPS, LocationLabel: label } = data[i]; + let coordinates = GPS.match(/Point\((-?[0-9]+(?:.(?:[0-9]+)?)?) (-?[0-9]+(?:.(?:[0-9]+)?)?)\)/); + if (!(coordinates == null)) { + let lat, lon; + [lon, lat] = coordinates.slice(1, 3).map(parseFloat); + let point = L.point() + let marker = L.marker([lat, lon]); + marker.bindPopup("<b>" + label + "</b><br/>" + "FastaCount: " +fastaCount); + markers.addLayer(marker) + }} + } // Reload the map map.invalidateSize(); }); diff --git a/bh20simplewebuploader/templates/header.html b/bh20simplewebuploader/templates/header.html index 35882d7..0ac5157 100644 --- a/bh20simplewebuploader/templates/header.html +++ b/bh20simplewebuploader/templates/header.html @@ -9,7 +9,19 @@ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> + <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" + integrity="sha512-RLEjtaFGdC4iQMJDbMzim/dOvAu+8Qp9sw7QE4wIMYcg2goVoivzwgSZq9CsIxp4xKAZPKh5J2f2lOko2Ze6FQ==" + crossorigin=""/> + + <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" + integrity="sha512-BBToHPBStgMiw0lD4AtkRIZmdndhB6aQbXpX7omcrXeG2PauGBl2lzq2xUZTxaLxYz5IDHlmneCZ1IJ+P3kYtQ==" + crossorigin=""/> + <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script> + + <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js" + integrity="sha512-MQlyPV+ol2lp4KodaU/Xmrn+txc1TP15pOBF/2Sfre7MRsA/pB4Vy58bEqe9u7a7DczMLtU5wT8n7OblJepKbg==" + crossorigin=""></script> </head> |