Mapbox-GL setStyle removes layers

Question

I'm building a mapping web application using Mapbox-GL. It has a lot of cool features. I've set up the buttons to switch base maps (ie. satellite, terrain, etc) following the example on the Mapbox website.

The problem that I am having is that when I change the style it removes my polygons that are loaded as layers and reloads the map. I load in polygons from a Mongo database as layers based on user queries. I want to be able to change the base map and keep those layers.

Is there a way to change the style without reloading the map, or at least not droping the layers?

Here is my code for the switcher, its the same as the example but I added a condition for a custom style:

 var layerList = document.getElementById('menu');     var inputs = layerList.getElementsByTagName('input');      function switchLayer(layer) {         var layerId = layer.target.id;         if (layerId === 'outdoors') {             map.setStyle('/outdoors-v8.json');         } else {         map.setStyle('mapbox://styles/mapbox/' + layerId + '-v8');         }     }      for (var i = 0; i < inputs.length; i++) {         inputs[i].onclick = switchLayer;     } 

Answer 1

Here's an example demonstrating that: http://bl.ocks.org/tristen/0c0ed34e210a04e89984

Unlike a mapping library like Leaftlet, Mapbox GL JS doesn't have a concept of "basemap" vs "other layers." All layers are part of the same entity: the style. So you need to keep some state of the data layer around and call its source/addLayer on each change.