How to clear leaflet map of all markers and layers before adding new ones?
Solution 1
If you want to remove all the current layers (markers) in your group you can use the clearLayers
method of L.markerClusterGroup()
. Your reference is called markers
so you would need to call:
markers.clearLayers();
Solution 2
You're losing the marker reference because it's set with var. Try saving the references to 'this' instead.
mapMarkers: [],
map: function (events) {
[...]
events.forEach(function (event) {
[...]
// create the marker
var marker = L.marker([event.location.lat, event.location.lng]);
[...]
// Add marker to this.mapMarker for future reference
this.mapMarkers.push(marker);
});
[...]
}
Then later when you need to remove the markers run:
for(var i = 0; i < this.mapMarkers.length; i++){
this.map.removeLayer(this.mapMarkers[i]);
}
Alternatively, instead of saving each reference to each marker, you can just save the cluster to 'this'.
Solution 3
map._panes.markerPane.remove();
Comments
-
Patrioticcow almost 2 years
I have the fallowing code:
map: function (events) { var arrayOfLatLngs = []; var _this = this; // setup a marker group var markers = L.markerClusterGroup(); events.forEach(function (event) { // setup the bounds arrayOfLatLngs.push(event.location); // create the marker var marker = L.marker([event.location.lat, event.location.lng]); marker.bindPopup(View(event)); // add marker markers.addLayer(marker); }); // add the group to the map // for more see https://github.com/Leaflet/Leaflet.markercluster this.map.addLayer(markers); var bounds = new L.LatLngBounds(arrayOfLatLngs); this.map.fitBounds(bounds); this.map.invalidateSize(); }
I initially call this function and it will add all
events
to the map with markers and clusters.at some lather point i pass in some other events, the map will zoom in to the new events but the old ones are still on the map.
I've tried
this.map.removeLayer(markers);
and some other stuff, but I can't get the old markers to disappearAny ideas?