Show and Tell - Dash Leaflet

[thilles]

Very nice component @Emil.
It seems though as it doesn’t play that well in a dbc.Tabs environment. In the code below the map loads, but only a portion of it is shown. Zooming seems to update the small portion, so things are happening behind the scenes.
What’s more strange is that when I do an ‘Inspect element’ in the browser, suddenly the whole map loads and renders as expected.

Any tips or tricks to why this is happening?

Code

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_leaflet as dl

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(dl.Map(dl.TileLayer(maxZoom=20), style={
                    'width': '100%', 'height': '500px'}))
        ]
    )
)

tabs = dbc.Container([
        dbc.Tabs([
            dbc.Tab(tab1_content, label="Map in a tab-environment"),
        ])
    ])

app.layout = html.Div([
    tabs
])

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