I am currently working on integrating a bootstrap collapse element that contains a leaflet map. My goal is to toggle the map view open and closed, but I have encountered an issue where the map does not resize properly when the collapse item is opened. As a result, the displayed map appears as a grey box after toggling it on. After conducting some research, I learned that I need to execute the invalidateSize function on my map after opening the collapse element. However, I am unsure of how to implement this JavaScript command in my Plotly-Dash application. Below is my current setup:
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import dash_leaflet as dl
from dash.dependencies import Input, Output, State
map_collapse = dbc.Collapse(
html.Div(
[
dl.Map(
[
dl.TileLayer(),
dl.LocateControl(options={'locateOptions': {'enableHighAccuracy': True}})
],
id="map",
style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"}
)
]
),
id="map-collapse",
is_open=False,
style={
'width': '800px', 'height': '400px'
}
)
collapse_button = dbc.Button(
"Open collapse",
id="collapse-button",
className="mb-3",
color="primary",
n_clicks=0,
)
app.layout = html.Div(
[
collapse_button ,
map_collapse
]
)
@app.callback(
Output("map-collapse", 'is_open'),
[Input("collapse-button", "n_clicks")],
[State("map-collapse", "is_open")]
)
def toggle_collapse(n, is_open):
if n:
return not is_open
return True
if __name__ == '__main__':
app.title = 'Dash App'
app.run_server(debug=True)
Your assistance with this issue would be greatly appreciated!