How to assign a layer added from mapbox studio to a source created in client side?

1
votes

I have created few layers with the help of mapbox studio and initialized the mapboxgl object with the style sheet link.

This has worked fine but now I want to refresh/re-assign the layer with some real new sources at client side.

I am using following code

mapBox.addSource('source-id', { type: 'geojson', data: mergedOverlaysGeoJson }); 

mapBox.addLayer({
        "id": 'some-already-created-layer-id',
        "source":'source-id',
        "type" : "symbol"});

But its not working as expected, where expectations are :

  • Whatever properties I give to addLayer method, it should override the corresponding properties came through studio and it should retain the others

  • 'id' of layer , 'source' of layer and 'type' of layer field are mandatory to detect the existing layer

2
mapbox-gl-jsmapbox-gl

2 Answers

1
votes

mapbox-gl won't allow layers with duplicate ids. Calling addLayer with a id already added to the map, won't "overwrite" the current layer.

If you want to "update" the layer, you should remove the layer defined by the style and re-add it using the code you provided. Though with this you will lose the paint & layout properties of the original layer. You could use map.getPaintProperty/getLayoutProperty to retrieve the style of the original layer and then pass it on to the new layer.

You also can't just switch the source a layer is connected to.

0
votes

In addition to Scarysize's answer, if your specific need is replacing the data of a GeoJSON source, then you could also just do that directly with setData():

mapBox.setData('source-id', myNewMergedOverlaysGeoJson );