Improved map to show sequences in one view

2 files changed, 42 insertions, 15 deletions

diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index bc8acb0..bd51118 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -469,7 +469,11 @@ div.status {
   font-size: 20px;
 }
 
+.my-custom-icon.my-custom-icon-0 {
+  background-color: red;
+}
 .my-custom-icon.my-custom-icon-1 {
+  background-color: orange;
 }
 .my-custom-icon.my-custom-icon-2 {
   background-color: #FFFAF0;
diff --git a/bh20simplewebuploader/static/map.js b/bh20simplewebuploader/static/map.js
index dfe88f9..cabb63d 100644
--- a/bh20simplewebuploader/static/map.js
+++ b/bh20simplewebuploader/static/map.js
@@ -1,4 +1,10 @@
+/*
+
+Draws the map using Leaflet and OpenStreetmap
+
+drawMap() is the main function.
 
+*/
 var map = L.map( 'mapid', {
     center: [51.505, -0.09],  // Default to U.S.A
     minZoom: 2,
@@ -10,17 +16,21 @@ L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     subdomains: ['a','b','c']
 }).addTo(map);
 
+/*
+ * When a page gets rendered this function draws the map
+ */
 
 function drawMap(){
     var mymap = map;
 
+    // ---- fetch all counts
     fetch(scriptRoot + "api/getCountByGPS")
         .then(response => {
             console.log(response)
             return response.json();
         })
         .then(data => {
-            updateMapMarkers(data);
+            buildMapMarkers(data);
 
       });
     document.getElementById("map_view").classList.remove("invisible");
@@ -28,10 +38,8 @@ function drawMap(){
 }
 
 
-
-
 /*
- * These functions updates the map with markers
+ * Register a marker with special attribute track # sequences
  */
 
 seqMarker = L.Marker.extend({
@@ -42,26 +50,41 @@ seqMarker = L.Marker.extend({
    }
 });
 
+/*
+ * Builds markers on the map. We use cluster groups to allow
+ * counts at different zoom levels. This function is called
+ * once on page loading. markerClusterGroup just handles it.
+ * Note the display is handled in CSS (main.css) as .my-custom-icon*
+ */
 
-function updateMapMarkers(data) {
+function buildMapMarkers(data) {
     let markers = L.markerClusterGroup({
+        singleMarkerMode: true,
         iconCreateFunction: function (cluster) {
-            var theseMarkers = cluster.getAllChildMarkers(); //// -- this is the array of each marker in the cluster.
+            // ---- add marker
+            // array of each marker in the cluster:
+            var theseMarkers = cluster.getAllChildMarkers();
+
+            // --- compute zoom level and set style
 
             sumCount = 0;
             for (var i = 0; i < theseMarkers.length; i++) {
-                // console.log(theseMarkers[i]);
                 sumCount += theseMarkers[i].options.sequences;
             }
 
-            var digits = (sumCount + '').length;
-
-            return L.divIcon({
-                html: sumCount,
-                className: 'my-custom-icon my-custom-icon-'+digits,
-            });
-        },
-    });
+            if (theseMarkers.length < 2) {
+                return L.divIcon({
+                    html: sumCount,
+                    className: 'my-custom-icon my-custom-icon-0',
+                })
+            } else {
+                var digits = (sumCount + '').length;
+                return L.divIcon({
+                    html: sumCount,
+                    className: 'my-custom-icon my-custom-icon-'+digits,
+                });
+            }}});
+    // ---- Build the marker list
     for (let i = 0; i < data.length; i++) {
         let {"count": fastaCount, GPS, LocationLabel: label } = data[i];
         let countSeq = Number(fastaCount);