Access Marker Cluster from leaflet map and use refreshClusters

[nicoagp]

(Question) I have created a Cluster map with multiple markers ( I am using Vue but it would be similar in vanilla javascript I believe)

I do have a side panel with a list of items and when I hover, it should highlight the markers and/or cluster (if marker is inside) in the map. The highlight functionality is working fine if I hardcoded the 'highlightedPinId' on load but it will chance dynamically on hover. So the goal is to update the marker/cluster color without reloading everything.

How can I access the leaflet map and cluster and refresh the cluster with markers. I thought using the refreshClusters function but I am not sure how access it from the outside ?

Minimal example of what I am trying to do

searchMap.vue

 <div id="mapleaflet" ref="mapleaflet"></div>
...
 data() {
    return {
      map: null,
      highlightedPinId: null, // when hovering over card in listing
    }
  },
...
methods: {
    refreshClusters() {
      // maybe something like this ? (the below is a draft, I do not expect to work)
      this.map.markerClusterGroup.refresh
    },
...
}
...
 watch: {
    highlightedPinId() {
      this.refreshClusters();
    }
  },

Thank you

[diwic]

At some point, you create the cluster with something like:

const myCluster = markerClusterGroup(...);

And later:

myCluster.refreshClusters();

In my case, I do this.myCluster = L.markerClusterGroup() somewhere inside the mounted hook of Vue. I can then do this.myCluster.refreshClusters() when some other event happens.

[nicoagp]

Awesome, thank you diwic! I will try that.