10

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 4

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());
1
  • 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, 2017 at 9:41
10

You should just clone the array:

const layers = [...map.getLayers().getArray()]
layers.forEach((layer) => map.removeLayer(layer))
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;
}
-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

2
  • This results into the very same behaviour. And I see no error messages inside the catch block.
    – Jacobian
    Nov 29, 2016 at 10:01
  • 1
    This uses internal properties of the map. Never do that!
    – ahocevar
    Jan 10, 2017 at 10:32

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.