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