feat: can highlight cluster

Greenstand · Apr 3, 2021 · 3f5f055 · 3f5f055
1 parent 7a54536
commit 3f5f055
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 19 deletions.
diff --git a/src/models/Map.js b/src/models/Map.js
@@ -22,6 +22,14 @@ export default class Map{
     log.info("options:", options);
   }
 
+  static formatClusterText(count){
+    if(count > 1000){
+      return `${Math.round(count/1000)}K`;
+    }else{
+      return count;
+    }
+  }
+
   mount(domElement){
     const mapOptions = {
       minZoom: this.minZoom,
@@ -68,31 +76,30 @@ export default class Map{
       }
     });
 
-    this.layerUtfGrid.on('mouseover', function (e) {
+    this.layerUtfGrid.on('mouseover', (e) => {
       log.debug("mouseover:", e);
-//      const [lon, lat] = JSON.parse(e.data.latlon).coordinates;
-//      markerHighlight = new window.L.marker(
-//        [lat, lon],
-//        {
-//            icon: new window.L.DivIcon({
-//              className: "greenstand-cluster-highlight",
-//              html: `
-//                <div class="greenstand-cluster-highlight-box"  >
-//                <div></div>
-//                </div>
-//              `,
-//              iconSize: [32, 32],
-//            }),
-//        }
-//      );
+      const [lon, lat] = JSON.parse(e.data.latlon).coordinates;
+      this.layerHighlight = new this.L.marker(
+        [lat, lon],
+        {
+            icon: new this.L.DivIcon({
+              className: "greenstand-cluster-highlight",
+              html: `
+                <div class="greenstand-cluster-highlight-box"  >
+                <div>${Map.formatClusterText(e.data.count)}</div>
+                </div>
+              `,
+            }),
+        }
+      );
 //      markerHighlight.payload = {
 //        id: e.data.id
 //      };
-//      markerHighlight.addTo(map);
+      this.layerHighlight.addTo(this.map);
     });
-    this.layerUtfGrid.on('mouseout', function (e) {
+    this.layerUtfGrid.on('mouseout', (e) => {
       log.debug("e:", e);
-//      this.map.removeLayer(markerHighlight);
+      this.map.removeLayer(this.layerHighlight);
     });
     this.layerUtfGrid.addTo(this.map);
 

diff --git a/src/style.css b/src/style.css
@@ -265,3 +265,23 @@ body {
   font-family: Roboto, Arial, sans-serif;
   font-size: 14px;
 }
+
+/* new version */
+
+.greenstand-cluster-highlight{
+  z-index: 999 !important;
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+}
+
+.greenstand-cluster-highlight-box {
+  background: url(./images/cluster_63px_highlight.png);
+  width: 63px;
+  height: 63px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translate(-50%, -50%);
+  font-family: Roboto, Arial, sans-serif;
+  font-size: 14px;
+}