Deck.gl: Icon Layer is not being added at the correct position in the Map Instance

[uppeabhishek]

Description

Icon Layer is not being added at the correct position in the Mapbox Map Instance

Repro Steps

I'm creating a new IconLayer Json using deckgl as below

const layer = { id: "icon-layer", type: IconLayer, ...otherParams }

and adding to Mapbox map instance using the below code

this.map = new mapboxgl.Map({ container: "map", {...otherParams} });

this.map.addLayer(new MapboxLayer(layer));

By default, any layer which is added at last should be appended at the top of the map but it's not working as expected for Icon Layer and layer doesn't get appended at top.

I even tried moving the icon layer to the top of the map using Mapbox moveLayer function but couldn't solve the issue.

Note: Only the Icon Layer is not working as expected. Other layers like GeoJson layers are appended properly to the map.

Environment (please complete the following information):

• Framework Version: deck.gl 8.2.5
• Browser Version: Chrome 84.0
• OS: Ubuntu 20.04

Logs

[Pessimistress]

What do you mean by "not being added at the correct position", is it not inserted to the end of Mapbox's layers array, or is it not rendered on top of other layers?

[mfoglio]

Just found this page on Google looking for a way to fix this issue.

What happens is that it looks like the IconLayer is always displayed below the other layers and therefore it is covered by them. This always happens, and it happens independently from the order the layers are added.

[Pessimistress]

This is related to https://github.com/visgl/deck.gl/issues/4680

Because Mapbox messes with depthRange when rendering its own layers, we don't have a way to precisely position our layers in the depth space to match theirs. You can try give the IconLayer's positions a small z so that it floats above the ground.

[uppeabhishek]

I was able to temporarily fix this issue by changing the layerIndex in getPolygonOffset in layer class to a higher level to so the icon layer stays at the top.