leaflet markercluster spiderfy not working

Question

update: added the minimum code to reproduce the problem

---

per the markercluster docs

spiderfy: Spiderfies the child markers of this cluster

I take it to understand that if I have code like so, clicking on a marker will cause the containing marker cluster to spiderfy (if it is indeed a markercluster, and not a stand alone marker).

update: added more detailed code below.

However, I get the error that foo.spiderfy() is not a function. How can I achieve what I want?

To summarize, if I click on a cluster, it spiderfies. Then, if I click on an individual marker in that cluster and fire the click event, I want the cluster to remain spiderfied and not collapse into a cluster.

minimum code to reproduce the problem

var map = L.map('map').setView([51.505, -0.09], 11);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

const points = [
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
];

const foo = L.markerClusterGroup();

for (const point of points) { 
    const marker = L.marker(point);
    marker.on('click', function(e) {

        // recenter map to the clicked point. Note that this is
        // the key action that causes the map to recenter, and
        // zoom to a level where, normally, this marker collapses
        // back into a cluster. And, this is the behavior that I
        // want to prevent
        map.flyTo(point, 11);

        // Now, spiderfy the cluster, if it is still a cluster
        // at this new center and zoom combo

        // We find the right cluster
        const cluster = foo.getVisibleParent(marker);
        
        if (cluster) {
            console.log('the clicked marker is indeed a part of a cluster');

            // Spiderfy only if marker is in cluster
            foo.spiderfy(cluster);
        }
    });
    foo.addLayer(marker);
}

map.addLayer(foo);

note1: I am using markerCluster 1.4.1
note2: the console indeed tells me that the clicked marker is indeed a part of a cluster

Answer 1

Take a look at this code, it should work.

const points = [
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047],
];

const foo = L.markerClusterGroup();

for (const point of points) {
  const marker = L.marker(point);

  marker.on("click", function () {
    map.flyTo(point, 11);

    const cluster = foo.getVisibleParent(marker);

    if (cluster) {
      console.log("Marker jest częścią klastra");

      map.setView(cluster.getLatLng(), map.getZoom());
    }
  });

  foo.addLayer(marker);
}

map.addLayer(foo);