re-arranging layer order / z-index

[yocontra]

What I'm trying to do: Multiple layers, when one is selected the z-index should be 1 while others are 0 so the data points from the selected layer are visible over ones not selected.
What worked: Multiple DeckGLOverlays with one layer each, then use CSS z-index on each overlay
What isn't working: One DeckGLOverlay with multiple layers.

I've tried two approaches:

• Change the position of the layer in the layers array (causes an error: assert.js:137 Uncaught AssertionError: Matching layer has no state)
• Change the z attribute of every dot in the data array (moves, but other values are still in front)

Is there currently a way to do this?

[yocontra]

ah, my mistake - reordering works, needs to be the last item not the first item though

[locomotif]

I apologize in advance if this has been documented, is there a way for individual data points within a single layer to have a z-index? Currently I been doing what was mentioned here, essentially having individual layers for icons that i want to appear on top. I tried using the third position on the position attribute z, which is for altitude, but I guess I cannot use it for that purpose.

[ibgreen]

@locomotif Which layers are you working with? Most layers support a third (z) coordinate.

Not sure I understand your use case? Are you having z-fighting issues within your layer?

[locomotif]

@ibgreen sorry for not being completely clear, and thank you for your reply. I am working with IconLayer, and PathLayer. Say I have N amount of paths rendered on a single PathLayer instance. Currently all paths have the same color, and there are some paths that overlap. I want to be able to change the color of a single path on a single PathLayer with N paths, and have it render on top of all paths. I tried sorting the data array but that didn't work.

[ibgreen]

@locomotif Controlling the order in which paths render is tricky since we use instanced rendering in deck.gl - all paths are drawn "in parallel" with a single GPU draw call - this is one of the tricks we use that are critical for deck.gl's rendering performance on big data.

It so happens that we are developing a new PathOutlineLayer on master that does what I think you want by using "shadow buffer" techniques (you can assign a z value to each path). You can test it by pulling latest master, go to examples/layer-browser and do npm run start-local to see if it does what you want.

You could try to copy it to your app, but unfortunately I will not recommend that you do that it just yet, it will likely be more pain than it is worth. You might need to use deck.gl 4.2, which is still in alpha and rapidly changing. A couple of weeks from now things should look better.

For now your best bet might be to use minuscule z deltas in the layer positions for each path (and make sure to turn on depthTest). Experiment and see what works.