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

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