Added marker cluster to the map

CUAHSI · Jan 19, 2025 · a4da7ca · a4da7ca
1 parent c4f5d67
commit a4da7ca
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
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",
     "papaparse": "^5.4.1",
     "pinia": "^2.1.6",
     "swagger-ui": "^5.10.5",

diff --git a/frontend/src/stores/map.js b/frontend/src/stores/map.js
@@ -3,6 +3,7 @@ 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)
@@ -11,6 +12,33 @@ export const useMapStore = defineStore('map', () => {
   const perceptualModelsGeojson = ref([])
   const mapLoaded = ref(false)
   let currentFilteredData = ref([])
+  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>`
@@ -118,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) {
@@ -138,7 +167,8 @@ export const useMapStore = defineStore('map', () => {
     })
 
     // add filtered features
-    layerGroup.value.addLayer(modelFeatures.value)
+    markerClusterGroup.addLayer(modelFeatures.value);
+    layerGroup.value.addLayer(markerClusterGroup);
   }
 
   function resetFilter() {
@@ -148,7 +178,8 @@ export const useMapStore = defineStore('map', () => {
         onEachFeature(feature, layer)
       }
     })
-    layerGroup.value.addLayer(modelFeatures.value)
+    markerClusterGroup.addLayer(modelFeatures.value);
+    layerGroup.value.addLayer(markerClusterGroup);
   }
 
   return {