function zoom to cluster closes cluster with multiple markers at same lat/lng

Question

I'm creating a map with leaflet, with the marker clusters & marker clusters layer support plug ins.

I have a layer control with multiple overlays, so with some of them checked markers pop up at the same lat/lng with different data.

These points are clustering properly, but I'm having a problem where if I click a cluster of points at the same lat/lng the cluster wouldn't center, so often it would stay off to the side and be hard to see unless you manually clicked and dragged to center it.

If I click a cluster with points at different lat/lng, it would zoom in and center to that area. To attempt to fix this I added these 2 functions, one applying to the markers individually so that when they're clicked they center on the map, one applying to clusters that are clicked that causes the map to zoom to the bounds of the cluster.

What happens is you'll click the cluster, and it will expand and show the markers at the same point, but then it will zoom & center the cluster and close the cluster, so that you have to click it again to reveal the markers. I don't want this to happen.

I'm thinking maybe a function using panTo would work better with the cluster click? but not sure how to implement this. Thanks! These are the functions:

    markerClusters.on('clusterclick', function (a) {
        a.layer.zoomToBounds();
    });


    map.on('popupopen', function(e) {
var px = map.project(e.popup._latlng); // find the pixel location on the map where the popup anchor is
px.y -= e.popup._container.clientHeight/2 // find the height of the popup container, divide by 2, subtract from the Y axis of marker location
map.panTo(map.unproject(px),{animate: true}); // pan to new center

    });

Answer 1

You should probably use the "spiderfied" event on your markerClusters MCG, instead of "clusterclick" which fires also for clusters that do not need to spiderfy.

Furthermore, as you figured out, as soon as you perform a zoom, that operation closes the spiderfication. Using panTo as you guessed avoids the zoom change, hence does not close the spiderfication.

markerClusters.on('spiderfied', function (event) {
  var cluster = event.cluster;

  // Center the map on the clicked cluster if it gets spiderfied.
  map.panTo(cluster.getLatLng());
});

Demo: https://jsfiddle.net/3v7hd2vx/397/