Unable to remove all layers from a map

I have a big map application, so to be representative I will have to provide just a chunk of code. So, this is how I try to remove all layers from a map:

map.getLayers().forEach(function (layer) { map.removeLayer(layer); }); //map.getOverlays().clear(); <-- also tried this, but to no effect 

And I have some random behaviour - sometimes all layers are removed, sometimes not. It's a complete randomness, so there is no guarantee, that you will be able to reproduce this issue. So, it may be enough for me to know just conceptually, why it may happen.

SOLUTION

This is obviously an ol3 bug, because if I loop and delete just twice, then it starts working:

map.getLayers().forEach(function (layer) { map.removeLayer(layer); }); //for some crazy reason I need to do it twice. map.getLayers().forEach(function (layer) { map.removeLayer(layer); }); 

Probably, it's not a bug, and there is some secret method, that enables to clear the map. But I do not know about it.

4 Answers

This is not a bug. The reason why your code does not work is because you are modifying the layers collection while looping through it. Doing so changes the index of each layer, and will cause unexpected results.

The proper way to clear all layers of a map is to use ol.Map#setLayerGroup():

map.setLayerGroup(new ol.layer.Group()); 

You should just clone the array:

const layers = [...map.getLayers().getArray()] layers.forEach((layer) => map.removeLayer(layer)) 

You can use a while loop to do this and check the length of the layer array, as they are rearranged each time a layer is deleted, so this is why the forEach doesn't work, try

var layerArray, len, layer; layerArray = map.getLayers().getArray(), len = layerArray.length; while (len > 0){ layer = layerArray[len-1]; map.removeLayer(layer); len = layerArray.length; } 

I achieve that a while ago this way:

for(i in map._layers){ if(map._layers[i]._path != undefined) { try{ map.removeLayer(map._layers[i]) }catch(e){ } } } 

Maybe it helps