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

1 files changed, 17 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();
     });