feat: enable passing marker cluster options

Author: Gugustinette

playground/pages/map/markercluster.client.vue

@@ -76,7 +76,14 @@ const locations = [
 const onMapReady = async () => {
   const { markers, markerCluster } = await useLMarkerCluster({
     leafletObject: map.value.leafletObject,
-    markers: locations
+    markers: locations,
+    options: {
+      // showCoverageOnHover: true
+      // zoomToBoundsOnClick: true
+      // spiderfyOnMaxZoom: true
+      // removeOutsideVisibleBounds: true
+      // spiderLegPolylineOptions: { weight: 1.5, color: '#222', opacity: 0.5 }
+    }
   });
   // Access the markers
   markers[3].bindPopup('<h1>Hello Pornic</h1><button type="button" style="background: black; color: white;">Click me</button>');

src/runtime/composables/useLMarkerCluster.ts

@@ -11,9 +11,18 @@ interface MarkerProps {
   popup?: string
 }
 
+interface MarkerClusterGroupOptions {
+  showCoverageOnHover?: boolean
+  zoomToBoundsOnClick?: boolean
+  spiderfyOnMaxZoom?: boolean
+  removeOutsideVisibleBounds?: boolean
+  spiderLegPolylineOptions?: any
+}
+
 interface Props {
   leafletObject: Map
   markers: MarkerProps[]
+  options?: MarkerClusterGroupOptions
 }
 
 export const useLMarkerCluster = async (props: Props) => {
@@ -25,7 +34,7 @@ export const useLMarkerCluster = async (props: Props) => {
   const { MarkerClusterGroup } = await import('leaflet.markercluster')
 
   // Initialize marker cluster
-  const markerCluster = new MarkerClusterGroup()
+  const markerCluster = new MarkerClusterGroup(props.options)
 
   // Create an array to store the markers
   const markers = [] as Marker[]