0

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?

  • JS operator in checks if argument is member of an array. If you want to iterate through array elements, see for example Looping Array Elements section of w3schools.com/js/js_arrays.asp – TomazicM Oct 6 at 16:41
  • 1
    It is used also to loop through an array, you can check it and by the way the loop is working just fine. – zakaria mouqcit Oct 6 at 16:44
  • Hm, one can always learn something new, obviously I'm no JS expert :-) – TomazicM Oct 6 at 18:38
2

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();
...
| improve this answer | |
  • In fact you are right, the markers were removed but the map wasn't updated, I noticed it the changes after zooming out or in. Thanks again for your help! – zakaria mouqcit Oct 7 at 10:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.