How to clear leaflet map of all markers and layers before adding new ones?

Question

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?

Answer 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();

Answer 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'.

Answer 3

map._panes.markerPane.remove();

Answer 4

$(".leaflet-marker-icon").remove();
$(".leaflet-popup").remove();

Answer 5

You can clear all markers withought saving it

map.eachLayer((layer) => {
  layer.remove();
});

from https://leafletjs.com/reference-1.0.3.html#map-event

Answer 6

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()