zIndex of dash-leaflet Pane stopped working on versions 1.0.0 and later

[karmflo]

I am currently updating my application which includes migrating dash-leaflet from 0.1.28 to 1.0.13. There are several GeoJSON layers that need to be displayed (ordered) inside a map. The order is very important. In version 0.1.28 the ordering worked fine with dl.Pane and style={"zIndex": 100}. After migrating I noticed that zIndex is ignored and the GeoJSON layers are stacked based on loading time. Also when hovering over a layer that is in the background it will move to the top.

My application uses the following updated versions:

• dash-leaflet==1.0.13
• dash==2.14.2
• python==3.11.6

I have also tried to play around with the pane option of the dl.Pane and dl.GeoJSON component which states: pane (string; optional): Map pane where the layer will be added., but the ordering ist still ignored.

I use a very simple example to demonstrate the issue. By changing the sleep in each of the function, I change the order of the layers.

Am I missing something or is this a bug? 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]

I believe that this is a regression (a bug in the new implementation, where the pane information is not propagated correctly to the underlying GeoJSON object). I have implemented a fix for it now. Could you test this release resolves your issues?

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

[karmflo]

Thanks for you help! Works like a charm! :)

[karmflo]

Thanks a lot

[emilhe]

Great! I have included the changes in the (non-rc) 1.0.15 release :)