javascript - Leaflet Markercluster: Exempt marker from clustering

Question

How can one exampt a marker with open popup from collapsing into a cluster when zooming out?

I am using leaflet and markercluster as set up in this example:

HTML:

<div id="map"></div>

CSS:

html,
body {
  height: 100%;
}

#map {
  height: 100%;
}

JS:

const map = L.map('map', {
    zoom: 5,
    center: [0,0],
    maxZoom: 18
});
const clustered = L.markerClusterGroup();
map.addLayer(clustered);

const m1 = L.marker(L.latLng(0,0));
m1.addTo(clustered);
m1.bindPopup('one');

const m2 = L.marker(L.latLng(0,1));
m2.addTo(clustered);
m2.bindPopup('two');

const m3 = L.marker(L.latLng(1,0));
m3.addTo(clustered);
m3.bindPopup('three');

I would like to temporarily exempt a marker from collapsing into a cluster as long as its popup is open. For the example, this would mean:

1. Zoom in until you see the individual markers.

2. Click one to open a popup.

3. Zoom out again.

The “popped up” marker should be visible, together with the open popup. The remaining markers should collapse.

4. When the popup is closed, the marker should disappear into the cluster.

I've tried to temporarily move the marker to the map (and back) on popupopen (and popupclose), but this does not work:

map.on('popupopen', function(e) {
    const m = e.popup._source;
    clustered.removeLayer(m);
    map.addLayer(m);
});
map.on('popupclose', function(e) {
    let m = e.popup._source;
    map.removeLayer(m);
    clustered.addLayer(m);
});

Any ideas?

Answer 1

Now this seems to be working. I had to add a separate layer unclustered, and handle popupopen only in the clustering layer, and popupclose only in the unclustered layer

const unclustered = L.markerClusterGroup(); // NOTE
map.addLayer(unclustered);
clustered.on('popupopen', function(e) {
    console.log('open');
    const m = e.popup._source;
    clustered.removeLayer(m);
    unclustered.addLayer(m);
    m.openPopup();
});
unclustered.on('popupclose', function(e) {
    console.log('close');
    let m = e.popup._source;
    unclustered.removeLayer(m);
    clustered.addLayer(m);
    m.closePopup();
});

NOTE: I'm not happy with using L.markerClusterGroup for the unclustered layer. But I would not know what else. As long as there's only one marker in that layer, it will work. But to exempt multiple markers from collapsing into a cluster, a different layer must be used. Which one? L.layerGroup does not work.