How to use a geojson layer without hiding map labels?

[easbar]

I'd like to display a geojson layer on top of Mapbox vector tiles, but the geojson should not hide any of the map's labels. I found the Layer's beforeId prop and set it to the first symbol layer of the Mapbox style. This works, but I also want to include a toggle that allows changing the Mapbox style. Unfortunately, the way I implemented this the style toggling results in this console error:

Error: Layer with id "tunnel-oneway-arrow-blue" does not exist on this map.
    addLayer webpack://App/./node_modules/mapbox-gl/dist/mapbox-gl.js?:34
    addLayer webpack://App/./node_modules/mapbox-gl/dist/mapbox-gl.js?:34
    createLayer webpack://App/./node_modules/react-map-gl/dist/esm/components/layer.js?:102
    Layer webpack://App/./node_modules/react-map-gl/dist/esm/components/layer.js?:159

The map style changes as expected, but the beforeId of the previous layer is still used and when it is not available in the new style this error occurs.

I took your geojson example and adjusted it to my use-case here: easbar@47f9edd

My requirements seem pretty common:

• allow changing the map style
• keep symbol layers on top of overlays like geojson

I wonder what the recommended way to do this is and if there is anything I can do to prevent this console error.

[easbar]

Any suggestions?

[victcebesp]

I am having the same issue. I have multiple layers on a map and the users can change the order of the layers. In order to do this, I used beforeId. However, when the user changes the style, the same error prompts.

I think that the problem is that when the style is updated, the layers are unmounted in the wrong order. So when a layers that is referenced on another layer's beforeId is unmounted, the error shows up

[victcebesp]

@easbar did you manage to solve this issue somehow?

[easbar]

No. Sorry to say but we are using OpenLayers now... graphhopper/graphhopper-maps#159

[victcebesp]

Got it! Thanks

[Pessimistress]

The map style changes as expected, but the beforeId of the previous layer is still used and when it is not available in the new style this error occurs.

If you need to change the map style, you should generally perform the following operations:

• Remove <Layer> and change the mapStyle prop
• On the styledata event, figure out what your new beforeId is, then add a new <Layer> component.

You can easily do so by maintaining a beforeId state, and render beforeId && <Layer ... />. When a map style changes, first set beforeId to null, and repopulate it when the style is available for inspection.

[easbar]

Thanks for your explanations @Pessimistress.