feat(MapboxCluster): add props to customize ids

packages/docs/.vitepress/components/MapboxClusterWithPopupDemo.vue

@@ -44,6 +44,10 @@
       @mb-close="() => (isOpen = false)">
       <pre>{{ content }}</pre>
     </MapboxPopup>
-    <MapboxCluster data="/earthquakes.json" @mb-feature-click="openPopup" />
+    <MapboxCluster
+      divId="cluster-popup-demo"
+      idPrefix="cluster-popup"
+      data="/earthquakes.json"
+      @mb-feature-click="openPopup" />
   </MapboxMap>
 </template>

packages/docs/components/MapboxCluster/index.md

@@ -49,7 +49,7 @@ Display a cluster on the map with data coming from a GeoJSON source.
 <MapboxClusterWithPopupDemo style="margin-top: 1em; height: 400px;" />
 </ClientOnly>
 
-<<< @/.vitepress/components/MapboxClusterWithPopupDemo.vue{6-8,10-28,38-47}
+<<< @/.vitepress/components/MapboxClusterWithPopupDemo.vue{6-8,10-30,39-51}
 
   :::warning
   The `:center` prop of the `MapboxMap` component must be set via a data property (see `mapCenter` in the example above) instead of directly in the template, as it can create unexpected behaviours when clicking on a cluster feature.
@@ -65,6 +65,29 @@ Display a cluster on the map with data coming from a GeoJSON source.
 
 ## Props
 
+### `idPrefix`
+
+- Type `String`
+- Default `''`
+
+Prefix of the ids of the auto-generated MapboxSource and MapboxLayers, which will be assigned the following IDs automatically:
+
+- MapboxSource: `${idPrefix}-source`
+- MapboxLayer (clusters circles): `${idPrefix}-clusters`
+- MapboxLayer (clusters count): `${idPrefix}-cluster-count`
+- MapboxLayer (unclustered points layer): `${idPrefix}-unclustered-point`
+
+If `idPrefix` is not provided, a default prefix `mb-cluster-${index}` will be assigned, where index is a number which will increment with each new MapboxCluster instance.
+
+### `divId`
+
+- Type `String`
+- Default `''`
+
+id of `<div>` element encapsulating the component. If none is provided, a default id will be assigned:
+
+- `mb-cluster-${idPrefix}` if `idPrefix` is provided
+- `mb-cluster-${index}` if not
 
 ### `data`
 

packages/vue-mapbox-gl/components/MapboxCluster.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="id">
+  <div :id="divId">
     <MapboxSource :id="sourceId" :options="source" />
     <MapboxLayer
       :id="clustersLayer.id"
@@ -19,6 +19,22 @@
 
 <script>
   const propsConfig = {
+    /**
+     * Prefix of the ids of the auto-generated MapboxSource and MapboxLayers
+     * @type {string}
+     */
+    idPrefix: {
+      type: String,
+      default: '',
+    },
+    /**
+     * id of the <div> element encapsulating the component
+     * @type {string}
+     */
+    divId: {
+      type: String,
+      default: '',
+    },
     /**
      * The source of the data for the clustered points,
      * must be a String or an Object of GeoJSON format.
@@ -141,7 +157,7 @@
 </script>
 
 <script setup>
-  import { ref, unref, computed } from 'vue';
+  import { unref, computed } from 'vue';
   import { useMap } from '../composables/index.js';
   import MapboxLayer from './MapboxLayer.vue';
   import MapboxSource from './MapboxSource.vue';
@@ -151,10 +167,16 @@
   const emit = defineEmits();
 
   const { map } = useMap();
-  const id = ref(`mb-cluster-${index}`);
-  index += 1;
 
-  const getId = (suffix) => `${unref(id)}-${suffix}`;
+  const prefix = computed(() => (props.idPrefix ? props.idPrefix : `mb-cluster-${index}`));
+  if (!props.idPrefix) index += 1;
+  const divId = computed(() => {
+    if (props.divId) return props.divId;
+    if (props.idPrefix) return `mb-cluster-${props.idPrefix}`;
+    return `mb-cluster-${index}`;
+  });
+
+  const getId = (suffix) => `${unref(prefix)}-${suffix}`;
 
   const sourceId = computed(() => getId('source'));
   const source = computed(() => {