Unable to remove all layers from a map

Question

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.

Furcula

Answer 1

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

Tadzhik

Isn't there any pattern to remove some specific layer if we got a condition, in a forEach? Your answer makes sense but it's not exactly what OP needed. – Catton

Answer 2

You should just clone the array:

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

Tauro

Answer 3

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;
}

Piccaninny

Answer 4

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

Industry

This results into the very same behaviour. And I see no error messages inside the catch block. – Furcula

This uses internal properties of the map. Never do that! – Tadzhik