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

Question

I have the following 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 a later 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

Liquidize

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

Galven

I tended to add my map layers to 'var editableLayers = new L.FeatureGroup()' so I use this code 'this.editableLayers.clearLayers()' in order to clear shapes which I drew on the map. – Institutionalism

With this approach you clear all the markers added to markerClusterGroup. If you want to keep the markers for later usage, it's better due to performance issues to simply remove the cluster group from the map with map.removeLayer(markers) – Curtcurtail

L.markerClusterGroup() is not part of Leaflet by default; it can be replaced with L.layerGroup() – Thermionic

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

Yardage

thanks, markers.clearLayers(); did the trick, but you had a good point using this otherwise i couldn't do it – Liquidize

Answer 3

map._panes.markerPane.remove();

Estienne

its just remove image ! – Mutt

Answer 4

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

Anastomose

for me there was also a shadow .leaflet-marker-shadow – Thiazole

Answer 5

You can clear all markers withought saving it

map.eachLayer((layer) => {
  if (layer instanceof L.Marker) {
     layer.remove();
  }
});

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

Thanet

This removes the entire map. – Houseclean

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

Surprise

this.marker != this.markers , also make this.markers needs to be an array or object ? – Thiazole