Merge branch 'develop' into download-map-metadata

Author: devincowan

frontend/package-lock.json

@@ -21,6 +21,7 @@
     "leaflet-easybutton": "^2.4.0",
     "leaflet-iconmaterial": "^1.1.0",
     "papaparse": "^5.4.1",
+    "leaflet.markercluster": "^1.5.3",
     "pinia": "^2.1.6",
     "swagger-ui": "^5.10.5",
     "vee-validate": "^4.13.2",

frontend/package.json

@@ -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,34 @@ 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>`
@@ -27,28 +56,28 @@ export const useMapStore = defineStore('map', () => {
 
 
     const props = feature.properties;
-    const note = "This is not a public access article, see the url.";
+    const note = "Not open access, see article for ";
     if (props.model_type.name === 'Text model') {
       if(props.citation.attribution == "Not open-access"){
-        content += note
+        content += note + "text"
       }else{
         content += `<p>${feature.properties.textmodel_snipped}</p>`
       }
 
       if(((props.textmodel_section_name && props.textmodel_section_name != "N/A") 
         || (props.textmodel_section_number && props.textmodel_section_number != "N/A")) 
         && (props.textmodel_page_number && props.textmodel_page_number != "N/A")){
-        content += `<h5>${props.textmodel_section_number != "N/A" ? ("Section " + props.textmodel_section_number ) + ' ' : ''} ${props.textmodel_section_name != 'N/A' ? props.textmodel_section_name + ' ' : ''} ${props.textmodel_page_number != "N/A" ? ("(pg " + props.textmodel_page_number) + ')' : ''}</h5>`
+        content += `<p class="mt-1"><b>Section ${props.textmodel_section_number != "N/A" ? (props.textmodel_section_number ) + '</b> ' : '</b>'} ${props.textmodel_section_name != 'N/A' ? props.textmodel_section_name + ' ' : ''} ${props.textmodel_page_number != "N/A" ? ("(Page " + props.textmodel_page_number) + ')' : ''}</p>`
       }
     } else {     
       if(props.citation.attribution == "Not open-access"){
-        content += note
+        content += note + "figure"
       }else{
         content += `<img src="${feature.properties.figure_url}" style="width: 100%">`
       }
 
       if(props.figure_caption && props.figure_caption != "N/A"){
-        content += `<h5>${props.figure_num != "N/A" ? ("Figure " + props.figure_num + ' : ') : ''} ${props.figure_caption}</h5>`
+        content += `<p class="mt-1"><b>Figure ${props.figure_num != "N/A" ? (props.figure_num + ' :</b> ') : '</b>'} ${props.figure_caption}</p>`
       }
     }
     content += '<hr><br>'
@@ -118,7 +147,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 +168,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 +179,8 @@ export const useMapStore = defineStore('map', () => {
         onEachFeature(feature, layer)
       }
     })
-    layerGroup.value.addLayer(modelFeatures.value)
+    markerClusterGroup.addLayer(modelFeatures.value);
+    layerGroup.value.addLayer(markerClusterGroup);
   }
 
   return {