Added marker cluster to the map

CUAHSI · Jan 19, 2025 · d059bec · d059bec
1 parent c5a9b5f
commit d059bec
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 13 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -20,6 +20,7 @@
     "leaflet": "^1.9.4",
     "leaflet-easybutton": "^2.4.0",
     "leaflet-iconmaterial": "^1.1.0",
+    "leaflet.markercluster": "^1.5.3",
     "pinia": "^2.1.6",
     "swagger-ui": "^5.10.5",
     "vee-validate": "^4.13.2",

diff --git a/frontend/src/stores/map.js b/frontend/src/stores/map.js
@@ -3,13 +3,42 @@ import { ref } from 'vue'
 import { ENDPOINTS } from '@/constants'
 import L from 'leaflet'
 import 'leaflet-iconmaterial/dist/leaflet.icon-material'
+import 'leaflet.markercluster';
 
 export const useMapStore = defineStore('map', () => {
   const leaflet = ref(null)
   const layerGroup = ref(null)
   const modelFeatures = ref({})
   const perceptualModelsGeojson = ref([])
   const mapLoaded = ref(false)
+  const markerClusterGroup = L.markerClusterGroup({
+    iconCreateFunction: (cluster) => {
+      const childCount = cluster.getChildCount();
+
+      let color = 'blue';
+      if (childCount > 10) {
+        color = 'red';
+      }
+
+      return L.divIcon({
+        html: `
+        <div style="
+          background-color: ${color};
+          border-radius: 50%;
+          color: white;
+          text-align: center;
+          line-height: 40px;
+          width: 40px;
+          height: 40px;
+          box-shadow: 0 4px 10px ${color};
+        ">
+          ${childCount}
+        </div>`,
+        className: 'custom-cluster-icon',
+        iconSize: [40, 40]
+      });
+    },
+  });
 
   function onEachFeature(feature, layer) {
     let content = `<h3>Perceptual model of <strong>${feature.properties.location.long_name}</strong></h3>`
@@ -117,7 +146,8 @@ export const useMapStore = defineStore('map', () => {
       },
       pointToLayer: pointToLayer
     })
-    layerGroup.value.addLayer(modelFeatures.value)
+    markerClusterGroup.addLayer(modelFeatures.value); // Add features to the cluster group
+    layerGroup.value.addLayer(markerClusterGroup);
   }
 
   function filterFeatures(filterFunction) {
@@ -135,7 +165,8 @@ export const useMapStore = defineStore('map', () => {
       pointToLayer: pointToLayer
     })
     // add filtered features
-    layerGroup.value.addLayer(modelFeatures.value)
+    markerClusterGroup.addLayer(modelFeatures.value);
+    layerGroup.value.addLayer(markerClusterGroup);
   }
 
   function resetFilter() {
@@ -145,7 +176,8 @@ export const useMapStore = defineStore('map', () => {
         onEachFeature(feature, layer)
       }
     })
-    layerGroup.value.addLayer(modelFeatures.value)
+    markerClusterGroup.addLayer(modelFeatures.value);
+    layerGroup.value.addLayer(markerClusterGroup);
   }
 
   return {