How can I change render ordering to order data points across many different layers?

[connorbuchko]

When working with multiple layer types like scatterplot, icons, and paths, I want to be able to freely control where data points are ordered in the stack. So for example a render ordering could be:

1. Icon A
2. Path A
3. Icon B
4. Scatterplot A
5. Path B
6. Path C
7. Icon C
   etc. etc. etc.

As far as I'm aware, render ordering can only be controlled at the layer level. How can I make that more fine grained and reorder data points across all these layers?

[donmccurdy]

@connorbuchko a deck.gl layer is how elements are grouped for drawing to the GPU, and for performance reasons, it's important that GPU draws are grouped. You could, technically, put each element into its own layer and sort the layers however you want. That would be very slow, not because layers are expensive, but because issuing lots of small draw calls to the GPU has high overhead.

Is it specifically just the render order you want to control? Note that an element drawn 'later' is not always drawn 'on top' of elements drawn earlier, unlike the Canvas 2D API. If there's something particular you're trying to solve with the render order, we might be able to suggest other options.

[connorbuchko]

Yeah I guess it's not necessarily the render order I'm trying to control, but rather what elements appear visually over other elements.
The feature is for the user to be able to control what elements appear on top, on the bottom, in the middle, etc. And there are many cases where the user may want to put an individual icon on the top and another icon on the bottom but have other layers in-between, as an example.

[donmccurdy]

In that case, see the coordinate systems documentation — most layers accept an altitude or z coordinate that determines which elements are drawn on top. Keep in mind that drawing two overlapping elements at the same height may cause z-fighting. And, with any semi-transparency, there are additional challenges around alpha blending in some cases.

Example: https://jsfiddle.net/donmccurdy/ewh3zcg0/

[connorbuchko]

okay great! That looks like what I need, thank you!