How to Remove All Layers and Features from Map?
I Am Working on a Map and I Would Like to Remove All Features from the Map on a Certain Event. the Features Are in Multiple Layers Which Are Plotted...
I am working on a map and I would like to remove all features from the map on a certain event. The features are in multiple layers which are plotted dynamically.
Some of the code is:
$.getJSON('distributor-companies', function (data) {
var layers = [];
$.each(data, function (i, item) {
if (item.geojson != '') {
layers[i] = L.mapbox.featureLayer().addTo(map);
$.getJSON('/geojson/' + item.geojson, function (data) {
layers[i].setGeoJSON(data);
// Loop over the added layer
layers[i].eachLayer(function (layer) {
// Add click event
layer.on('click', function (e) {
// Do stuff
map.fitBounds(layers[i].getBounds());
});
});
});
}
});
});
Is there a way to fetch all layers on the map at a certain point in time and remove them.
5 Answers
Loop over all the layers added to the map using the eachLayer method of L.Map, then call the removeLayer method of L.Map on each of them:
map.eachLayer(function (layer) {
map.removeLayer(layer);
});
References:
eachLayer:
removeLayer:
Please note that this wil remove ALL the layers from your map. That means also any tilelayers etc. I think in your case it would be best if you do not add all your featureLayers to the map instance, but create a group for them:
// Create group for your layers and add it to the map
var layerGroup = L.layerGroup().addTo(map);
$.getJSON('distributor-companies', function (data) {
$.each(data, function (i, item) {
if (item.geojson != '') {
// Add the new featureLayer to the layerGroup
var featureLayer = L.mapbox.featureLayer().addTo(layerGroup);
$.getJSON('/geojson/' + item.geojson, function (data) {
featureLayer.setGeoJSON(data);
featureLayer.eachLayer(function (layer) {
layer.on('click', function (e) {
map.fitBounds(featureLayer.getBounds());
});
});
});
}
});
});
Now you can call the clearLayers method of L.LayerGroup which will clear of the current layers in the group:
layerGroup.clearLayers();
Reference:
L.LayerGroup:
clearLayers:
You can use the following truthy check to see if it's a valid geoJSON object:
map.eachLayer(function(layer) {
if (!!layer.toGeoJSON) {
map.removeLayer(layer);
}
});
Based on iH8's answer but more concise if you want to remove all layers apart from the tile layer. Just check if the layer is a tile layer by i.e. checking the _url:
var osmUrl = '
map.eachLayer(function (layer) {
if (osmUrl != layer._url){map.removeLayer(layer)};
});
I solved my problem using this. My layer type was "fill" and layer name was "source_tiles_1", "source_tiles_2", "source_tiles_3"
map.getStyle().layers.forEach((layer) => {
if(layer.id.match(/source_tiles/g)){
map.removeLayer(layer.id);
map.removeSource(layer.id);
}
});
In the mabox-gl draw library, There is a function to do this.
draw.deleteAll().getAll();
This deletes all the features and layers on the map.
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
