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?
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();
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'.
map._panes.markerPane.remove();