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.markerClu         


        

Answer 1

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

Answer 2

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 3

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

Answer 4

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 5

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 6

map._panes.markerPane.remove();