How to overwrite the icon when using vue2-leaflet-markercluster (singleMarkerMode)?

Question

When using a icon in singleMarkerMode, it will not work properly link

But when remove <l-icon />, it will work normally

is it possible use both together?

28/02

In code 1, I think refreshClusters() will consider disableClusteringAtZoom.

So I tried to use refreshClusters() in mounted.

Result: The program does not consider disableClusteringAtZoom, and changes the icon immediately.

In code 2, I try to set the initial singleMarkerMode to false and use @update:zoom to check the zoom, when it < disableClusteringAtZoom, then set singleMarkerMode to true and use refreshClusters()

Result: The initial icon is a custom icon, and when the zoom is <15, the icon is changed, but after that, when the zoom is >= 15, it cannot be changed back to the custom icon.

Any ideas how to change back to custom icons? Or any method that makes singleMarkerMode work similar to markercluster (multi)

Code1

<template>
  <div>
    <div>
      ...
      <l-marker-cluster
        :options="{
          singleMarkerMode: true,
          spiderfyOnMaxZoom: false,
          disableClusteringAtZoom: 15,
        }"
        ref="clusterRef"
      >
        <l-marker :lat-lng="marker">
          <l-icon
            :icon-url="icon.type.black"
            :shadow-url="icon.shadowUrl"
            :icon-size="icon.iconSize"
            :icon-anchor="icon.iconAnchor"
            :popup-anchor="icon.popupAnchor"
            :shadow-size="icon.shadowSize" />
         </l-marker>
       </l-marker-cluster>
    ...
  </div>
</template>

<script>
import ...
export default {
  components: {...},
  data() {...},
  mounted() { 
    setTimeout(() => this.$refs.clusterRef.mapObject.refreshClusters(), 100);
  }
};
</script>

Code2

    ...
      <l-map :@update:zoom="changeZoom" ...>
        ...
      <l-marker-cluster
        :options="{
          singleMarkerMode: singleMode,
          spiderfyOnMaxZoom: false,
          disableClusteringAtZoom: 15,
        }"
        ref="clusterRef"
      >
        <l-marker :lat-lng="marker">
          <l-icon
            :icon-url="icon.type.black"
            :shadow-url="icon.shadowUrl"
            :icon-size="icon.iconSize"
            :icon-anchor="icon.iconAnchor"
            :popup-anchor="icon.popupAnchor"
            :shadow-size="icon.shadowSize" />
         </l-marker>
       </l-marker-cluster>
    ...

<script>
import ...
export default {
  components: {...},
  data() {
    singleMode: false 
  ...},
  mounted() {},
  methods: {
    changeZoom(zoom) {
      if(zoom < 15) {
        this.singleMode = true;
        setTimeout(() => this.$refs.clusterRef.mapObject.refreshClusters(), 100);
      }
      else this.singleMode = false;
    }
  }
};
</script>

score 2 · Accepted Answer · answered Feb 27 '21 at 18:56

Seems like a "conflict" between how Leaflet.markercluster overrides your Marker Icon in singleMarkerMode and how Vue2Leaflet (re)sets the icon based on the presence of the <l-icon> child.

The good news is that you can instruct Leaflet.markercluster to re-override your Marker icons with its refreshClusters() method, so just call it after a short delay.

To access the MarkerClusterGroup object, simply set a ref on the corresponding template tag, as described in https://github.com/jperelli/vue2-leaflet-markercluster#access-markercluster-layer-directly

<l-marker-cluster ref="clusterRef">

export default {
  mounted() {
    setTimeout(() => this.$refs.clusterRef.mapObject.refreshClusters(), 1000);
  },
};

After using refreshClusters(), I have some questions about it and disableClusteringAtZoom. — JustFun2020, Feb 28 '21 at 01:39

How to overwrite the icon when using vue2-leaflet-markercluster (singleMarkerMode)?

1 Answers1