Leaflet and MarkerCluster - don't perform clustering when there is a popup currently open?

Question

I have a Leaflet + MarkerCluster application that has some markers on a map and some logic to add image overlays to the map when the popup that is associated with the marker is opened (upon a click on the marker). I use bindPopup() to add popups to the markers.

markers.on('popupopen', function (e) {

    var b = e.layer.boundary;

    if (b) {

    //take some parameters for the overlay from an array that is passed as a
    //property of the marker

    var image = b[0];
    var LatStart = b[1];
    var LngStart = b[2];
    var LatEnd = b[3];
    var LngEnd = b[4];

//doOverlay() creates the overlay
var overlay = doOverlay(image,LatStart,LngStart,LatEnd,LngEnd);

//add the overlay to the map
map.addLayer(overlay);

//make the overlay widely-accessible as a window property
window.overlay = overlay;

}

doOverlay() contains some basic logic for creating an ImageOverlay:

function doOverlay(image,LatStart,LngStart,LatEnd,LngEnd) {

  var bounds = new L.LatLngBounds (

  new L.LatLng(LatStart,LngStart),
  new L.LatLng(LatEnd,LngEnd));

var overlay = new L.ImageOverlay(image,
  bounds, {  
  pane: 'general'
});

    return overlay
}

However, because i'm using MarkerCluster to group markers in clusters, if the user clicks on a marker, gets the popup and the overlay is created, and then they zoom out, a clustering occurs, the marker is clustered, the popup disappears (but no popupclose event is generated) and we end up with a ghosting image overlay on the map that can not be removed.

In a normal situation, when the user closes the popup (or clicks somewhere else on the map or on another marker), a "popupclose" event is generated and i remove the image layer:

markers.on('popupclose', removeOverlay);

function removeOverlay() {

  if (window.overlay) {

  map.removeLayer(overlay);
  window.overlay=null;

  }

Currenrly, i'm forced to listen for every "animationend" event (when any change happens to the clusters controlled by MarkerCluster anywhere on the map), then remove the layer and close the popup, which is a very bad approach, as the user must click on the marker again when they are ready with the zoom setting:

markers.on('animationend', function (e) {

    removeOverlay();

    map.closePopup();

});

ghybs ghybs · Accepted Answer · 2019-08-14T01:52:55

If you want your Marker and its Popup to remain on map and no longer be handled by the MarkerClusterGroup, then an easy solution would be to remove it from that group on Marker click (and adding it directly to the map + open Popup).

Then when the Popup is closed, add the Marker back into your MarkerClusterGroup (remove it from the map first; Marker Cluster will add it back if it is supposed to be visible).

As for the missing "popupclose" event, that could indeed be an issue to report to Leaflet.markercluster or Leaflet.

Leaflet and MarkerCluster - don't perform clustering when there is a popup currently open?

1 Answers