Show and Tell - Dash Leaflet

Dash Python
,
156

@karosc - Per default, the markers are all written to a default pane. You could try wrapping the markers in Pane component. You should then be able to control the order via the zindex of the Pane.

@thilles - Thanks! I have seen this issue before. I believe it is because map container must be visible when the leaflet map is constructed in React. When you use the Tabs component, the map is initialized too early. I haven’t found the fix yet, but as a quick fix you can delay the initialization yourself via a callback, e.g. something like this

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

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
tab1_content = dbc.Card(
    dbc.CardBody(
        [
            html.H2("This is a heading"),
            html.P("Here we wright something"),
            dbc.Row(id="map")
        ],
        id="trigger")
)
tabs = dbc.Container([
    dbc.Tabs([
        dbc.Tab(tab1_content, label="Map in a tab-environment"),
    ])
])
app.layout = html.Div([
    tabs
])


@app.callback(Output("map", "children"), Input("trigger", "children"))
def draw_map(_):
    return dl.Map(dl.TileLayer(maxZoom=20), style={'width': '1000px', 'height': '500px'})


if __name__ == '__main__':
    app.run_server(debug=True, port=7778)
1 Like