Merge pull request #20 from qq7/custom-marker

add Custom marker option interface

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
+### Added
+- added [iconCreateFunction](https://github.com/Leaflet/Leaflet.markercluster/?tab=readme-ov-file#customising-the-clustered-markers) prop.
 
 ## 0.5.1 - 2023-09-08
 ### Fixed

package.json

@@ -46,7 +46,7 @@
     "@tsconfig/node18": "^2.0.1",
     "@types/jsdom": "^21.1.1",
     "@types/leaflet": "^1.9.3",
-    "@types/leaflet.markercluster": "^1.5.1",
+    "@types/leaflet.markercluster": "^1.5.4",
     "@types/node": "^18.16.17",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue-leaflet/vue-leaflet": "^0.10.1",

src/functions/markerClusterGroup.ts

@@ -1,5 +1,13 @@
 import type { Ref, SetupContext, ExtractPropTypes } from 'vue'
-import type { MarkerClusterGroup, Layer, Point } from 'leaflet'
+import type {
+  DivIcon,
+  Icon,
+  IconOptions,
+  MarkerCluster,
+  MarkerClusterGroup,
+  Layer,
+  Point
+} from 'leaflet'
 import type { ILayerDefinition } from '@vue-leaflet/vue-leaflet/dist/src/types/interfaces/ILayerDefinition.d.ts'
 import type { LeafletEventKeys } from '@/types/markercluster'
 import { provide } from 'vue'
@@ -198,6 +206,10 @@ export const markerClusterGroupProps = {
   polygonOptions: {
     type: Object,
     default: () => ({})
+  },
+  iconCreateFunction: {
+    type: Function,
+    default: null
   }
 } as const
 
@@ -341,6 +353,12 @@ export const setupMarkerClusterGroup = (
     setPolygonOptions(val: object) {
       if (!leafletRef.value) return
       leafletRef.value.options.polygonOptions = val
+    },
+    setIconCreateFunction(val: (cluster: MarkerCluster) => DivIcon | Icon<IconOptions>) {
+      if (!leafletRef.value) return
+      leafletRef.value._unbindEvents()
+      leafletRef.value.options.iconCreateFunction = val
+      leafletRef.value._bindEvents()
     }
   }
 

src/playground/App.vue

@@ -6,6 +6,7 @@
         <v-list-item title="Marker props" to="/props-marker" />
         <v-list-item title="Marker events" to="/event-marker" />
         <v-list-item title="10.000 Marker" to="/10000-marker" />
+        <v-list-item title="Custom markers" to="/custom-marker" />
       </v-list>
     </div>
     <div class="map-wrapper">

src/playground/index.ts

@@ -17,7 +17,8 @@ const routes = [
   { path: '/', component: () => import('./views/BasicMarkerDemo.vue') },
   { path: '/props-marker', component: () => import('./views/MarkerPropsDemo.vue') },
   { path: '/event-marker', component: () => import('./views/MarkerEventDemo.vue') },
-  { path: '/10000-marker', component: () => import('./views/MarkerDemo.10000.vue') }
+  { path: '/10000-marker', component: () => import('./views/MarkerDemo.10000.vue') },
+  { path: '/custom-marker', component: () => import('./views/CustomMarker.vue') }
 ]
 
 const router = createRouter({

src/playground/views/CustomMarker.vue

@@ -0,0 +1,68 @@
+<template>
+  <div style="height: 50vh; width: 100%">
+    <l-map :useGlobalLeaflet="true" :zoom="8" :center="[50.4, 30.5]">
+      <l-tile-layer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        layer-type="base"
+        name="openstreetmap"
+      />
+      <l-marker-cluster-group :icon-create-function="drawRedCluster">
+        <l-marker :lat-lng="[50, 31.5]" />
+        <l-marker :lat-lng="[50, 31.5]" />
+        <l-marker :lat-lng="[50.1, 31.4]" />
+        <l-marker :lat-lng="[50.12, 31.4]" />
+        <l-marker :lat-lng="[50.144444, 31.4]" />
+        <l-marker :lat-lng="[50, 31.4]" />
+        <l-marker :lat-lng="[50.1, 31.7]" />
+      </l-marker-cluster-group>
+      <l-marker-cluster-group :icon-create-function="drawBlueCluster">
+        <l-marker :lat-lng="[50, 30.5]" />
+        <l-marker :lat-lng="[50.1, 30.4]" />
+        <l-marker :lat-lng="[50.12, 30.4]" />
+        <l-marker :lat-lng="[50.144444, 30.4]" />
+        <l-marker :lat-lng="[50, 30.4]" />
+        <l-marker :lat-lng="[50.1, 30.7]" />
+      </l-marker-cluster-group>
+    </l-map>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet'
+import { LMarkerClusterGroup } from '../../components/index'
+import { point } from 'leaflet'
+import { divIcon } from 'leaflet'
+
+import type { MarkerCluster } from 'leaflet'
+
+const drawBlueCluster = () => {
+  return divIcon({
+    className: 'blue-cluster',
+    iconSize: point(25, 25)
+  })
+}
+const drawRedCluster = (cluster: MarkerCluster) => {
+  const html = `${cluster.getChildCount()}`
+  const icon = divIcon({
+    className: 'red-cluster',
+    html,
+    iconSize: point(50, 50)
+  })
+  return icon
+}
+</script>
+
+<style>
+.blue-cluster {
+  background: rgb(10, 20, 225);
+  color: white;
+}
+
+.red-cluster {
+  background: rgb(185,26,0,0.333);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+</style>