Implement leaflet.markercluster for items map

- Removed use of leaflet-esm in order to work with non-esm supported L.markerClusterGroup
- Loading leaflet-non-esm and leaflet.markercluster via ESM import map for ease of view
- Add logic to determine if GeoJSON is point geometry or not for markerCluster handling

theme/static/js/composables/useMap.js

@@ -1,8 +1,9 @@
-import * as L from 'https://unpkg.com/[email protected]/dist/leaflet-src.esm.js'
-import { ref, computed, watch, onMounted } from 'vue'
+import 'leaflet-non-esm' 
+import 'leaflet.markercluster'
+import { ref, computed, watch, onMounted, onBeforeMount } from 'vue'
 
 export default function useMap(mapElemId, geoJsonData, itemsPath, tileLayerUrl, tileLayerAttr, bboxPermalink, locale) {
-  let map, layerItems
+  let map, layerItems, markers
   const maxZoom = 15
   const bbox = ref('')
   // Leaflet LatLngBounds simple array format
@@ -17,6 +18,16 @@ export default function useMap(mapElemId, geoJsonData, itemsPath, tileLayerUrl,
       ]
     }
   })
+  const geoJsonIsPointGeometry = computed(() => {
+    if (Object.prototype.hasOwnProperty.call(geoJsonData.value, 'features')) {
+      if (geoJsonData.value.features.length > 0 ) {
+        if (geoJsonData.value.features[0]['geometry']['type'] === 'Point') {
+          return true
+        }
+      }
+    }
+    return false
+  })
   const updateBboxEvent = function(evt) {
     const bboxString = evt.sourceTarget.getBounds().toBBoxString()
     const bboxSplit = bboxString.split(',').map((x, i) => {
@@ -54,15 +65,29 @@ export default function useMap(mapElemId, geoJsonData, itemsPath, tileLayerUrl,
       }
     ))
     layerItems = new L.GeoJSON({type: 'FeatureCollection', features: []})
-    map.addLayer(layerItems)
+    // Initialize MarkerClusterGroup
+    markers = L.markerClusterGroup({
+      disableClusteringAtZoom: 9,
+      chunkedLoading: true,
+      chunkInterval: 500,
+    })
+    map.addLayer(markers)
+
+    if (geoJsonIsPointGeometry.value) {
+      markers.clearLayers().addLayer(layerItems)
+    } else {
+      // Initialize without MarkerClusterGroup
+      map.addLayer(layerItems)
+    }
+
     // update bbox for permalink feature
     map.on('moveend', updateBboxEvent)
   }
   onMounted(setupMap)
 
   // update map with new geoJson data
   watch(geoJsonData, (newData, oldData) => {
-    if (map.hasLayer(layerItems)) {
+    if (map.hasLayer(layerItems) && geoJsonIsPointGeometry.value === false) {
       map.removeLayer(layerItems)
     }
 
@@ -86,7 +111,14 @@ export default function useMap(mapElemId, geoJsonData, itemsPath, tileLayerUrl,
         layer.bindPopup(html)
       }
     })
-    map.addLayer(layerItems)
+
+    // Add layer back depending on point vs other geometry
+    if (geoJsonIsPointGeometry.value) {
+      markers.clearLayers().addLayer(layerItems) // with MarkerClusterGroup
+    } else {
+      map.addLayer(layerItems) // without MarkerClusterGroup
+    }
+
     if (bbox.value === '' || !bboxPermalink.value) { // no bbox
       map.fitBounds(layerItems.getBounds(), {maxZoom: 5})
     } else if (Object.keys(oldData).length === 0) { // first time load

theme/templates/_base.html

@@ -29,7 +29,10 @@
     <script type="importmap">
       {
         "imports": {
-          "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.esm-browser.prod.js"
+          "vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.7/vue.esm-browser.prod.js",
+          "leaflet": "https://unpkg.com/[email protected]/dist/leaflet-src.esm.js",
+          "leaflet-non-esm": "https://unpkg.com/leaflet/dist/leaflet.js",
+          "leaflet.markercluster": "https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster-src.js"
         }
       }
     </script>

theme/templates/collections/items/index.html

@@ -24,6 +24,8 @@
 {% endblock %}
 {% block extrahead %}
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css"/>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css"/>
 {% endblock %}
 
 {% block body %}