Help: What is the proper way of controlling zIndex

[jparal]

I am trying to migrate my code from 0.0.22 to v0.1 of dash-leaflet but I am having a trouble of enforcing zIndex between two GeoJSON layers. In the past, I wrapped the layers in Pane and set zIndex on Pane.style property. After playing around for a bit, I noticed that zIndex is ignored and the GeoJSON layers are stacked based loading time. I created a simple example to demonstrate. By simply changing the sleep in each of the function, I change the order of the layers.

In the example, I would expect the states_slow layer should end up bellow states. But because of the states_slow is slower to load, it ends on top and thus the focus.

I admit, I have no clue what I am doing here so forgive me if I am missing something obvious. :)
Is it a bug or am I doing something wrong?
Thanks for your help.

import dash
import dash_html_components as html
import dash_leaflet as dl
from dash.dependencies import Output, Input

app = dash.Dash()
app.layout = html.Div([
    dl.Map(center=[39, -98], zoom=4, children=[
        dl.TileLayer(),
        dl.Pane(id="states_slow", style={"zIndex": 400}),
        dl.Pane(id="states", style={"zIndex": 500}),
    ], style={'width': '100%', 'height': '98vh', 'margin': "auto", "display": "block"}, id="map"),
])


@app.callback(Output("states_slow", "children"), [Input("map", "children")])
def plot_states_slow(map):
    import time
    time.sleep(1)
    return dl.GeoJSON(url="assets/us-states.pbf", format="geobuf", hoverStyle=dict(weight=10, color='black', dashArray=''))

@app.callback(Output("states", "children"), [Input("map", "children")])
def plot_states(map):
    import time
    time.sleep(0)
    return dl.GeoJSON(url="assets/us-states.pbf", format="geobuf", id="states", hoverStyle=dict(weight=5, color='#666', dashArray=''))

if __name__ == '__main__':
    app.run_server(debug=True)

[emilhe]

You are doing it correctly. It's a bug (or a missing feature?) in the GeoJSON component that it doesn't support custom panes, it's always rendered to the same pane. I have just implemented a fix and pushed it as version (0.1.2rc1),

https://pypi.org/project/dash-leaflet/0.1.2rc1/

It you agree that it now works as intended, i'll include it in the next release :)

[jparal]

I tested it and the change did the trick. thank you for your help.

[brunoazuma]

This seems to have stopped working on versions 1.0.0 and later. Could someone confirm that? Also, any other way of controlling zIndex is fine to me, with exception setting order.

[karmflo]

Yes, I can confirm that! I've just migrated to version 1.0.0 and the ordering of my layers inside a map that worked before stopped working now. @emilhe could you please have a look into that?