Mapbox-GL setStyle removes layers
<p>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 <a href="https://www.mapbox.com/mapbox-gl-js/example/setstyle/" rel="noreferrer">Mapbox website</a>.</p>

<p>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.</p>

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

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

<pre><code> 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 &lt; inputs.length; i++) {
        inputs[i].onclick = switchLayer;
    }
</code></pre>