Can't remove multiple layers

[azuryus]

I have a component that adds multiple layers, but when that component is destroyed, only the first layer is correctly removed.

This is because here https://github.com/soal/vue-mapbox/blob/3d27e6cb35788e16644fd68298ff85b643102f29/src/components/layer/layerMixin.js#L130-L131 the check on this.map.loaded() is false for the second layer:

https://docs.mapbox.com/mapbox-gl-js/api/#map#loaded Returns false if the style is not yet fully loaded, or if there has been a change to the sources or style that has not yet fully loaded.

Reproduced in Codepen: https://codesandbox.io/embed/vue-mapbox-remove-multiple-layers-at-the-same-time-tb9sy On the first click on the button, layers are added. On second click, both should be removed, but actually only the first is.

[loganwilliams]

@azuryus I'm hitting this too -- curious if you found a workaround? I'm wondering if I could just remove the loaded check. It might throw a few more errors, but that's better than leaving old layers hanging around.

[MajorClod]

@loganwilliams Did you try simply removing the loaded check? Any negative impacts?

[gorbypark]

@MajorClod I did. No real impacts that I've noticed, except for a second bug. Once it gets past the loaded check, it tries to remove the source, but of course that fails because it's still being used by the other layer. Fortunately for my use case, having :clearSource="false" on all layers that share a single source isn't an issue. I suppose you could have a separately named source-id for each layer (ie: add sources multiple times instead of sharing a source) and it would work. I have a repo if you want to try, https://github.com/gorbypark/vue-mapbox, I literally just forked, removed && this.map.loaded() and did a yarn run build.

[loganwilliams]

@gorbypark @MajorClod What a coincidence. I also just got around to doing this myself yesterday, in another fork. I've been using separately named sources, but :clearSource="false" is a more elegant solution. Thanks!