Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Access Marker Cluster from leaflet map and use refreshClusters #1069

Open
nicoagp opened this issue Aug 8, 2022 · 2 comments
Open

Access Marker Cluster from leaflet map and use refreshClusters #1069

nicoagp opened this issue Aug 8, 2022 · 2 comments

Comments

@nicoagp
Copy link

nicoagp commented Aug 8, 2022

(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
Copy link

diwic commented Aug 25, 2022

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
Copy link
Author

nicoagp commented Aug 25, 2022

Awesome, thank you diwic! I will try that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants