How to clear leaflet map of all markers and layers before adding new ones?
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 disappear
Any ideas?
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();
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'.