Mapbox-gl-js: Method to change a layer's source

[peterqliu]

Need a method for changing a layer's source. Currently, we need to remove and re-add the layer with the new source.

[jfirebaugh]

I think you should just remove and re-add the layer. Any implementation inside gl-js would do just that.

[stevage]

In case anyone else finds this, here's some code for you:

function setLayerSource (layerId, source, sourceLayer) {
    const oldLayers = map.getStyle().layers;
    const layerIndex = oldLayers.findIndex(l => l.id === layerId);
    const layerDef = oldLayers[layerIndex];
    const before = oldLayers[layerIndex + 1] && oldLayers[layerIndex + 1].id;
    layerDef.source = source;
    if (sourceLayer) {
        layerDef['source-layer'] = sourceLayer;
    }
    map.removeLayer(layerId);
    map.addLayer(layerDef, before);
}

It's included in mapbox-gl-utils.

[mnolta]

try:
const U = require('mapbox-gl-utils').init(map);
map.U.setData('mysource', data);
this worked for me, thanks to @stevage

[stevage]

Oh, the method I was referring to is the setLayerSource one:

map.U.setLayerSource('mylayer', 'mynewsource')