From a80646c6d6f2d768f63db2545f7e1542ea290f77 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Wed, 17 Jun 2020 18:54:58 +0300 Subject: 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 --- bh20simplewebuploader/static/main.js | 18 +++++++++++++++++- bh20simplewebuploader/templates/header.html | 12 ++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) 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("" + label + "
" + "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 @@ + + + + + + -- cgit v1.2.3