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.

score 11 · Answer 1 · answered Jan 10 '17 at 10:36

11

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

answered Jan 10 '17 at 10:36

ahocevar

5,448
15
29

1

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. – F3L1X79 Jan 18 '17 at 09:41

score 10 · Answer 2 · answered Mar 13 '19 at 11:58

10

You should just clone the array:

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

answered Mar 13 '19 at 11:58

YairTawil

3,961
1
22
20

score 3 · Answer 3 · answered Oct 11 '17 at 14:45

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

score -1 · Answer 4 · answered Nov 29 '16 at 09:56

-1

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

answered Nov 29 '16 at 09:56

naoxink

595
1
12
19

This results into the very same behaviour. And I see no error messages inside the `catch` block. – Jacobian Nov 29 '16 at 10:01
1

This uses internal properties of the map. Never do that! – ahocevar Jan 10 '17 at 10:32

Unable to remove all layers from a map

4 Answers4