Geographic Information Systems Asked on January 20, 2021
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?
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();
...
Correct answer by TomazicM on January 20, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP