Can the layer order the text and icon in the same order?

[mfflik]

When adding a symbol layer to display icons and labels using Deck GL, the labels always appear above the icons.

The expected behavior is to have icons and their corresponding labels displayed alternately in this order:
icon1, label1, icon2, label2. I want the icons and labels to overlap each other, like this.

Here is the code:
https://codesandbox.io/p/sandbox/vigorous-browser-z3v7rq

Could somebody help me figure out how to achieve the desired behavior where icons and labels appear in this alternating order?

note:
I’ve tried using the composite layer, but the issue remains the same.
I also tried using the WebGL2 parameter depthTest: false, but the behavior still persists.
I also tried use z coodinate still not working

[just-website]

https://codepen.io/Gleb-Shchukin/pen/gOJVorb
It works for me with depthTest: true and adding z-coord in getPosition func.
But i get muddiness at low zoom values.

[mfflik]

Okay, thank you for the answer. I think this solves the problem, but if the Z coordinate increases, the position moves higher. Also, when the Z index values are very close, there is stacking that doesn't align correctly. I tested this with 1000 features.

if anybody have a different solution is very welcome

[just-website]

For calc z-coord i use range of values ​​from 0 to 150. At the same time i divide range for different types of points (for highlighted).

...
MAX_MAP_Z_CORD_VALUE = 150
...
getPosition: (d: MapResourceType, { index, data }): Position[] => {
            const zIndex = MAX_MAP_Z_CORD_VALUE / (data.length + MAX_MAP_Z_CORD_VALUE / 2) * (index + (d.properties.selection === MapSelectionType.SELECTED ? 1 : 0) + MAX_MAP_Z_CORD_VALUE / 2) - 1;
            return [...d.geometry.coordinates, zIndex] as Position[];
        }

In my case it works for more than 15k points. I get dirt only at very small zoom values ​​(at continent level), which is not critical for me.

And you can show another (simplified) layer for the small zoom levels to hide the dirt. it's all work around, but we have what we have.

[vsukhostavskyi-lyft]

Hey @mfflik, I have currently the same problem with Text layer from previous element overlapping Icon Layer from next element.

Were you able to find a solution that fully fits you?
I've tried z-index but it didn't work for me as well...

[mfflik]

I used the @just-website solution—just add the following properties to each layer:

parameters: {
    depthTest: true,
},
getPolygonOffset: null

And don’t forget to add the Z coordinate to each feature.