RemoveMarkers() is not working for PruneCluster markers in Leaflet

Question

I have a set of markers clustered with PruneCluster plugin. The data of these markers is rendered from GeoJSON layers, the way to do it is like this:

    var propsAmp = amphibiens.features
    var propsMam = mammiferes.features
    var propsOis = oiseaux.features
    var propsPois = poissons.features
    var propsRep = reptiles.features
    var propsSb = sibes.features
    var propsPrc = parcs.features
    var propsZh = zonesHumides.features
    var propsArb = arbres.features


        var propsEspeces = []
        propsEspeces.push(propsAmp)
        propsEspeces.push(propsMam)
        propsEspeces.push(propsOis)
        propsEspeces.push(propsPois)
        propsEspeces.push(propsRep)
        propsEspeces.push(propsSb)
        propsEspeces.push(propsPrc)
        propsEspeces.push(propsZh)
        propsEspeces.push(propsArb)


        //console.log(propsEspeces)

        for (i in propsEspeces) {
            for (j in propsEspeces[i]) {
                var marker = new PruneCluster.Marker(propsEspeces[i][j].geometry.coordinates[1], propsEspeces[i][j].geometry.coordinates[0], {
                    data: propsEspeces[i][j].properties,
                    icon: L.icon({
                        iconUrl: "markers/" + propsEspeces[i][j].properties.category_image,
                        iconSize: [60, 60], // width and height of the image in pixels
                        shadowSize: [35, 20], // width, height of optional shadow image
                        iconAnchor: [12, 12], // point of the icon which will correspond to marker's location
                        shadowAnchor: [12, 6], // anchor point of the shadow. should be offset
                        popupAnchor: [0, 0]
                    })
                })
                switch (propsEspeces[i][j].properties.GrandeCat) {
                    case "AP":
                        marker.category = AIRES_PROTEGEES;
                        break;
                    case "Veget":
                        marker.category = VEGET;
                        break;
                    case "Faune":
                        marker.category = FAUNE;
                        break;

                }
                pruneCluster.RegisterMarker(marker);
            }
        }



        pruneCluster.PrepareLeafletMarker = function(leafletMarker, data) {
            leafletMarker.on('click', function(evt) {

                console.log('clicked')
            });
            leafletMarker.data = data
            leafletMarker.setIcon(data.icon);
        };



        pruneCluster.ProcessView();
        map.addLayer(pruneCluster);
        console.log(pruneCluster)

        var markers = []
        var remove_marker = document.getElementById('remove_marker');
        remove_marker.addEventListener('click', function() {
            for (var i in pruneCluster.Cluster._markers) {
                if (pruneCluster.Cluster._markers[i].data.data.category == 'Arbres') {
                    markers.push(pruneCluster.Cluster._markers[i])
                }

            }
            console.log(markers)
            pruneCluster.RemoveMarkers(markers)
        })

I'm getting the properties of each GeoJSON layer then pushing it in a global array, then assign to each marker it's proper data and icon.

I added a button to remove markers from map fulfilling a certain condition. So I'm storing the markers result of the condition in an array then passing it as parameter to the RemoveMarkers() function yet I'm getting nothing not even an error. I would like to know what am I missing and how can I handle this?

Answer 1

If you look in the documentation at https://github.com/SINTEF-9012/PruneCluster, you can read that cluster .ProcessView() method "Must be called when ANY changes are made.".

In your case that means that you have to call it after removal of markers:

...
pruneCluster.RemoveMarkers(markers);
pruneCluster.ProcessView();
...