Calling map.setStyle() removes all layers and sources

[Japjappedulap]

mapbox-gl-js version: 1.2.1

browser: Chrome(76.0.3809.100) and Firefox(68.0.2)

Steps to Trigger Behavior

1. Initialise map
2. Add multiple sources, layers
3. Call setStyle()
4. All added sources and layers get removed

Link to Demonstration

This can be seen in this official example.

I've also added a basic example derived from the setStyle example which only adds another layer to the map. If you change the map style, this layer will be removed.

https://jsbin.com/yekisosehe/1/edit?html,console,output

Expected Behavior

Change the map style and do NOT remove all the existing layers. This is critical, as in my case, I have a great deal of layers, sources and markers on the map and removing them when switching styles is a deal breaker.

Actual Behavior

Changes the map style and generates a warning in the console.

Unable to perform style diff: Unimplemented: setSprite..  Rebuilding the style from scratch.

Any known way to work around this and not rerender all the layers? Maybe I'm missing something obvious, but I don't think this should be the behaviour. I know there are some related issues such as 8241, 2058 or 2059 but with no conclusive answers.

[andrewharvey]

I believe this is #4006. That thread has some discussion on possible solutions, but generally the expectation is with you to either re-add those sources/layers after setStyle or even better integrate them into your Style JSON you pass to setStyle so that the smart diff which powers setStyle can retain them.

[mourner]

@andrewharvey thanks for chiming in, seconded. Closing as a duplicate of #4006.

[BlackHandguy]

do you solve the question?

[InfoseedDeveloper]

Create one function that adds an existing layer and source again.
Import the style into map.setStyle() and then access sources and layers to add it again.

The function execution must use setTimeout. Otherwise not applicable
In my case, I gave 200

[itanka9]

@InfoseedDeveloper

Sometimes setTimeout() may become flaky, e.g. in case of slow network or device. AFAIR a little bit more correct way is wait for styledata event which fired after map completes style loading.

[NessinM]

Here I leave a possible solution, I hope it can help you. codesandbox.io