Mapbox-gl-js: Example - Add custom layers after changing map style

[ryanbaumann]

Create custom layer style-swap example

Problem

Developers add custom layers and sources to base Mapbox Styles or custom styles, and then allow the user to toggle different map styles. Since there is no concept of base maps in GL JS, we should have an example of how to switch styles while maintaining custom layers.

Example proposal

Use map.on('style.load') event to trigger source and layer creation after a map style update.

http://bl.ocks.org/ryanbaumann/7f9a353d0a1ae898ce4e30f336200483/96bea34be408290c161589dcebe26e8ccfa132d7

[indus]

I would love to see an option for setStyle that copys some layers/sources over to the new style to keep them:

//layers appended to the end in the order of the array
setStyle('mapbox://styles/mapbox/' + layerId + '-v9', {
  copySources: ['states'],
  copyLayers: ['states']
})

// layer added after another layer
setStyle('mapbox://styles/mapbox/' + layerId + '-v9', {
  copySources: ['states'],
  copyLayers: [{'states':'waterway-label' }]
})

would be more "fire & forget" and more easy for dynamic data.

[averas]

I was actually going to file an issue on this subject myself. I would argue that switching "base" layers while retaining "custom" layers or overlays is one of the most common real life use cases. While this certainly is possible using the existing API, it's quite tedious and error prone to do so.

Currently plugins such as Mapbox Draw require a fair deal of code to handle style switches while retaining its dependency sources and layers.

[indus]

I had hoped that that this would be more easy to implement with the afforts for Smart setStyle, which already does the diffing between an old and a new style. But maybe I´m wrong?

[DannyDelott]

@indus I think you have to pass well-formed style objects in order for the diffing to work in #3621, ie: passing two mapbox style urls will not trigger the diffing behavior.

[lucaswoj]

This is very closely related to https://github.com/mapbox/mapbox-gl-js/issues/3660. We can make one example that addresses both needs.

https://github.com/mapbox/mapbox-gl/issues/25 is a design that'll make working with "custom" layers vs "basemap" layers much easier.

[lucaswoj]

Merging this into https://github.com/mapbox/mapbox-gl-js/issues/3660

[ghost]

Hi,
Thank you @ryanbaumann for the solution. I have one question for you. Since I'm using clustering point my map.on('load', function() has map.on('click', 'clusters', function (e) function beside map.addSource and map.addLayer. In your solution, you put them in map.on('style.load', function(). Where should I put my map.on function? inside the for loop?

[vacas]

@ryanbaumann, thanks for this solution, my friend. And my saved hair thanks you as well.