Support "nested" styles

[lucaswoj]

• SetStyle on map with multiple layers mapbox-gl-js#2267
• Changing map style remove its data mapbox-gl-js#2144
• "icon-image": "{marker-symbol}-15" doesn't work for dynamic js markers when adding it to a satellite map mapbox-gl-js#1878

...

Users don't expect setStyle to overwrite everything, and consider the current behavior a bug. This is a bummer, and something that we could document around, saying "setStyle will wipe out the current state of the map". I'm fine with the documentation approach, but it needs a workaround, because "switching the map style" is a common usecase that is a hard expectation - it's easy to do in Leaflet and all similar tile-based libraries. -- @tmcw, 2016

Injecting custom layers into Mapbox core styles is a common use case and confusing to our users, especially when the user wants to swap out the core style and keep the custom layers.

Have we considered supporting "nested styles"? These would help our users build a solid mental model of their stylesheet, encapsulate core style implementation details, allow new kinds of style modularity, and fit nicely into Studio.

map.setStyle({
    version: 9,
    layers: [{
        type: 'style',
        layout: { url: 'mapbox://styles/mapbox/streets-v9-bottom' }
    }, ..., {
        type: 'style',
        layout: { url: 'mapbox://styles/mapbox/streets-v9-top' }
    }]
});

[chadwilcomb]

Another user here trying to replicate this common Leaflet/Mapbox JSAPI use case (swapping out basemap beneath overlay layers). If there is a way to do this by constructing/manipulating a style object to change the "basemap" layers, an example in the documentation would go a long way to help.

[samanpwbb]

I support this idea. To side-step the problem, I find myself relying on multiple instances of mapbox gl and https://github.com/mapbox/mapbox-gl-sync-move.

[chriswhong]

+1, I need to allow the user to pick a different basemap style while leaving their carefully selected overlay layers in place.

[lucaswoj]

Migrated to mapbox/mapbox-gl-js#4000