Map: cleanup CSS

2 files changed, 52 insertions, 18 deletions

diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index 2f547ad..09b6beb 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -401,6 +401,56 @@ div.status {
     // display: inline-block;
 }
 
+.map-marker-cluster {
+    background-clip: padding-box;
+    border-radius: 20px;
+}
+.map-marker-cluster div {
+    width: 30px;
+    height: 30px;
+    margin-left: 5px;
+    margin-top: 5px;
+
+    text-align: center;
+    border-radius: 15px;
+    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+.map-marker-cluster span {
+    line-height: 30px;
+}
+
+.my-custom-icon {
+  width: 60px !important;
+  height: 40px !important;
+  // margin-left: -12px;
+  // margin-top: -40px;
+  opacity: 0.5;
+  border-radius: 30px;
+  // border: 2px solid #3F51B5;
+  text-align: center;
+  color: black;
+  background-color: lightgreen;
+  font-size: 20px;
+}
+
+.my-custom-icon.my-custom-icon-1 {
+}
+.my-custom-icon.my-custom-icon-2 {
+  background-color: #FFFAF0;
+}
+.my-custom-icon.my-custom-icon-3 {
+  background-color: #00CED1;
+}
+.my-custom-icon.my-custom-icon-4 {
+  background-color: #FFD700;
+}
+.my-custom-icon.my-custom-icon-5 {
+  background-color: pink;
+}
+.my-custom-icon.my-custom-icon-6 {
+  background-color: lightgrey;
+}
+
 .editbutton {
     float: right;
     text-align: right;
diff --git a/bh20simplewebuploader/static/map.js b/bh20simplewebuploader/static/map.js
index 81b6246..dfe88f9 100644
--- a/bh20simplewebuploader/static/map.js
+++ b/bh20simplewebuploader/static/map.js
@@ -45,13 +45,12 @@ seqMarker = L.Marker.extend({
 
 function updateMapMarkers(data) {
     let markers = L.markerClusterGroup({
-
         iconCreateFunction: function (cluster) {
             var theseMarkers = cluster.getAllChildMarkers(); //// -- this is the array of each marker in the cluster.
 
             sumCount = 0;
             for (var i = 0; i < theseMarkers.length; i++) {
-                console.log(theseMarkers[i]);
+                // console.log(theseMarkers[i]);
                 sumCount += theseMarkers[i].options.sequences;
             }
 
@@ -59,24 +58,9 @@ function updateMapMarkers(data) {
 
             return L.divIcon({
                 html: sumCount,
-                className: 'cluster digits-' + digits,
-                iconSize: null
-            });
-        },
-
-        pointToLayer: function (feature, latlng) {
-            return L.circleMarker(latlng, {
-                opacity: 1,
-                color: getSColor(10),
-                weight: getSwieght(10),
-                fillColor: getColor(10),
-                fillOpacity: .3,
-                radius: getRad(10),
-                pane: 'circlesIIOM'
+                className: 'my-custom-icon my-custom-icon-'+digits,
             });
-
         },
-
     });
     for (let i = 0; i < data.length; i++) {
         let {"count": fastaCount, GPS, LocationLabel: label } = data[i];