Add leaflet marker clusters

package.json

@@ -21,6 +21,7 @@
     "axios": "^1.4.0",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.3",
     "markdown-it-anchor": "^8.6.7",
     "pinia": "^2.1.6",
     "unhead": "^1.3.4",

src/components/Map/VMap.client.vue

@@ -16,6 +16,9 @@ import { makeTileFromConfiguration } from './utils/makeTileFromConfiguration'
 
 import '@geoman-io/leaflet-geoman-free'
 import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
+import 'leaflet.markercluster/dist/leaflet.markercluster'
+import 'leaflet.markercluster/dist/MarkerCluster.css'
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 
 delete L.Icon.Default.prototype._getIconUrl
 
@@ -94,6 +97,16 @@ const props = defineProps({
   prefix: {
     type: [String, Boolean],
     default: false
+  },
+
+  cluster: {
+    type: Boolean,
+    default: true
+  },
+
+  maxClusterRadius: {
+    type: Number,
+    default: 20
   }
 })
 
@@ -155,7 +168,8 @@ onMounted(() => {
     center: props.center,
     zoom: props.zoom,
     worldCopyJump: true,
-    dragging: props.dragging
+    dragging: props.dragging,
+    maxZoom: props.maxZoom
   }
 
   if (props.disableZoom) {
@@ -169,7 +183,9 @@ onMounted(() => {
   }
 
   drawnItems = new L.FeatureGroup()
-  geoJSONGroup = new L.FeatureGroup()
+  geoJSONGroup = props.cluster
+    ? new L.markerClusterGroup({ maxClusterRadius: props.maxClusterRadius })
+    : new L.FeatureGroup()
 
   mapObject = L.map(leafletMap.value, options)
   mapObject.attributionControl.setPrefix(props.prefix)

src/modules/otus/utils/index.js

@@ -1,4 +1,3 @@
-export * from './files'
 export * from './isRankGroup'
 export * from './makeGeoJSONFeature'
 export * from './removeDuplicateShapes'