Mapbox-gl-js: Unable to set layer ordering

[aabhishekbindal]

Hi Team,

I am using Mapbox Studio, where I am loading multiple overlays on a map. Also there are use cases for overlapping overlays (Points/Polygons/ Polylines).

I want to keep my calls as asynchronous, and still want to set the orders of particular layers. What is the best way to achieve this?

[Scarysize]

There are two ways to achieve the correct layer ordering:

1. Move a layer after it has been added with map.moveLayer: https://www.mapbox.com/mapbox-gl-js/api/#map#movelayer
2. Or define where in the layer stack the layer should be added by supplying a beforeLayer as a second parameter when calling map.addLayer(options, beforeLayer).

[aabhishekbindal]

@Scarysize What if I am not sure about whether the beforeLayer has been added or not ? (because at present, adding layer is asynchronous in my application)
Is there any other way to manipulate the ordering based upon any single entity lets say z-offset term discussed here : https://github.com/mapbox/mapbox-gl-js/issues/3993

[jfirebaugh]

No, you'll need to use either moveLayer or the beforeLayer parameter.

[hmendezm]

Hu Guys.
I am using moverLayer but it looks like it does not take effect the new order. My situation is that the user has controls to allow to add a layer to the map. The user can choose any kind of combination but the layer should be ordered according to business rules. for instance, if you add the traffic information layer and after zip code information layer. The user should be able to hover traffic and see information and hover zip code and see the information. The problem is the zip code layer cover traffic layer so I need always to the traffic layer in the top of zipcode. I also used layer beneath but it is not working. I checked the layer array and the order is ok but the map is not reflecting the order.
Best
hmendezm