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

Dash Python
1

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.

2

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
3

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.

4

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

5

This would be great if it’s possible…