CODEWITHSUNDEEP
javascriptleafletleaflet.markercluster
ShadowRock
ShadowRock

Reputation: 105

How to open popup for a specific marker inside a leaflet MarkerClusterGroup?

I want to open a popup for a marker that is under a markercluster when the map is zoomed out. This function is called when a user clicks on a search result.

This is the code that I am using:

map.eachLayer(function (layer) {
    if (layer.options && layer.options.pane === "markerPane") {
        if (layer.options.title == locationId) {
            layer.openPopup()
        }
    }
});

I tried adding this code but it didn't work as well:

layer.zoomToBounds({padding: [20, 20]});

Upvotes: 3

Views: 1976

Answers (2)

ShadowRock
ShadowRock

Reputation: 105

I found a fix for this issue. Before trying to open the popup in the cluster I teleport to the coordinates of the location. Then the cluster will automatically open up. 

map.setView([coordinates[1], coordinates[0]], 20);

I define which coordinates should be used and what the zoom level should be. After this function I use the layer.openPopup() function to open the popup.

Upvotes: 1

IvanSanchez
IvanSanchez

Reputation: 19069

So you want to so something about a cluster's marker whenever a specific marker in such cluster fulfills a condition.

You can iterate through all visible cluster markers, then leverage getAllChildMarkers; but that will get messy soon, as you will have to deal with the fact that a cluster and the cluster's marker are different entities, so iterating through visible markers doesn't necessarily mean iterating through the visible clusters.

I suggest an approach based on getVisibleParent. Store a reference to each original marker, indexed by the ID you'll be using later for lookup, e.g. ...

var clusterGroup = L.markerClusterGroup();
var markers = {};   // Yay using Object as a hashmap!
for (var i in dataset) {
    // Create individual marker based on a item in the dataset, e.g.
    var marker = L.marker(dataset[i].latlng);

    // Add that to the clusterGroup (but not to the map)
    clusterGroup.addMarker(marker);

    // Save the individual marker in the hashmap, indexed by the
    // desired property, e.g. "locationId"
    markers[ dataset[i].locationId ] = marker;
}

// Adding the cluster to the map after all items have been inserted should
// be slightly more performant than doing that before.
clusterGroup.addTo(map);

So with that, one should be able to look up the marker by the desired ID, see if it's in a cluster or directly visible, and do something about it:

function highlightLocationId(id) {
  // hashmap lookup
  var marker = markers[i];

  // Sanity check
  if (!marker) { return; }

  // What cluster is this marker in?
  var cluster = clusterGroup.getVisibleParent(marker);

  // Is the marker really in a cluster, or visible standalone?
  if (cluster) {
    // It's in a cluster, do something about its cluster.
    cluster.openPopup();
  } else {
    // It's not in a cluster but directly in the map, do something about it.
    marker.openPopup();
  }
}

Upvotes: 2

Related Questions