Change map style with sources

[miguelleitevieira]

I need a workaround for this scenario.
I create a map with 'mapbox://styles/mapbox/streets-v9' style, and I have a option to switch to change style to 'mapbox://styles/mapbox/satellite-v9' or for the initial style.
So, when I don't have anything on map (markers and circles) works well, but then I drawn something on the map, I get a error:

Uncaught Error: Style is not done loading
at t._checkLoaded (style.js:292)
at t.removeLayer (style.js:610)
at e.removeLayer (map.js:1153)
at e.value (mapbox-gl-circle-1.6.4.min.js:1)
at e.value (mapbox-gl-circle-1.6.4.min.js:1)
at e.Evented.fire (evented.js:93)
at e._onDataLoading (map.js:1666)
at e.Evented.fire (evented.js:93)
at t.Evented.fire (evented.js:103)
at t.loadURL (style.js:149)

Someone know a workaround for this?
Thanks.

[lbud]

Hey @miguelleitevieira, you'll want to check if the style is done loading before manipulating the map by listening for the 'load' event:

map.on('load', (e) => {
    // add markers, etc
});

You can see this pattern on many of the examples in the documentation, e.g. https://www.mapbox.com/mapbox-gl-js/example/add-image/. If you have any more "how do I" questions like this, please refer to the documentation or ask on StackOverflow.

[miguelleitevieira]

You didn't understood the case. The map are already loaded, but when I try to change the style I get a error. So I need to load the markers and circles when I change the style? Isn't a good approach.

[lbud]

@miguelleitevieira are you programmatically adding/changing markers and circles while switching the style, or have they already been loaded by the time you change the style?

If the former, you'll need to hold off on manipulating markers and circles while the style is being loaded. Runtime styling functions manipulate the underlying style and therefore require a style to be finished loading in order to operate on it. This is the case in which I'd expect to see the error you're seeing.

If the latter — you're not manipulating the style in any other way while switching the basemap — then the presence of that error is a bug; can you please provide a minimal self-contained JSFiddle that demonstrates the issue? Additionally, you won't be able to preserve any added markers with a pure setStyle call to change the basemap: markers and other layers added at runtime become part of the style object, and setStyle diffs the old and new style, so markers/other custom layers not present in the "new" style will be removed; you'll need to preserve the markers and re-add them to the modified map (see #3979, #4006 for discussion).

Upon closer inspection it looks like in the middle of your stack trace there's something from mapbox-gl-circle (which I assume is https://github.com/smithmicro/mapbox-gl-circle) — it's worth looking into whether the error you're seeing is related to behaviors of that module (i.e. that mapbox-gl-circle attempts to manipulate layers in the middle of loading a new style), but it's impossible to diagnose without a self-contained example.

[mblomdahl]

@lbud The "removing and adding stuff back" is already supported by mapbox-gl-circle; https://github.com/smithmicro/mapbox-gl-circle/blob/master/lib/main.js#L794-L807

It seems that the issue that @miguelleitevieira identified was caused by circle being built with mapboxgl-0.40.1, while the web application ran a later version (0.42.1). Is there a good way strategy to building the circle in such a way that it won't matter much which Mapbox GL version it is used with?