How to clear leaflet map of all markers and layers before adding new ones?
JavascriptGoogle MapsMapsLeafletJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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 - Javascript
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 - Javascript
map._panes.markerPane.remove();
Solution 4 - Javascript
$(".leaflet-marker-icon").remove();
$(".leaflet-popup").remove();
Solution 5 - Javascript
You can clear all markers withought saving it
map.eachLayer((layer) => {
layer.remove();
});
Solution 6 - Javascript
I used a combination of the two best answers here from beije and Prayitno Ashuri.
Saving the markers to "this" so we can reference it later.
this.marker = L.marker([event.location.lat, event.location.lng]);
and then just removing the markers.
this.markers.remove()