Dash-leaflet map - change order of layers on the dl.Map

When building a dl.Map with dash-leaflet (Python), all the layers added are in normal order in the dl.LayersControl, but on reverse order on the map - the first layer in LayersControl is on the bottom of the map and so on. I suppose zIndex could be used to change the orders of the layers, but could not succeed so far. Any support is appreciated.

If you need to manually control layer order, you can wrap your components in a Pane component. That way, they are drawn to that particular pane (otherwise, they are drawn to different panes depending on the component type). You can then set the z-index of that pane,

import dash
import dash_html_components as html
import dash_leaflet as dl

app = dash.Dash()
app.layout = html.Div([
    dl.Map([dl.TileLayer(),
            dl.Pane([dl.CircleMarker(center=(56, 10), fillOpacity=1)], style={"z-index": 1000}),
            dl.Pane([dl.CircleMarker(center=(56, 10), fillColor="red", fillOpacity=1)], style={"z-index": 1001})]),
], style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})

if __name__ == '__main__':
    app.run_server()
1 Like

Thanks Emil, but this doesn’t allow me to have LayerControl in my map, to be able to check and uncheck the layers. I have 10 GeoJsons and would like to check/uncheck them.

Was it ever resolved how to control layer levels while also using layerControl?
Thanks.