如何使 Dash 應用程序的引導折疊元素中包含的 leaflet map 的大小無效？

Question

我正在努力添加一個包含 leaflet map 的引導折疊元素，以便我可以切換打開/關閉 map 視圖。 但是，leaflet map 在應用程序初始化時正在調整大小，並且在打開折疊項時不會調整大小。 因此，打開時顯示的結果 map 大部分只是一個灰色框。 在做了一些研究之后，似乎我必須在打開折疊元素后在我的 map 上調用 invalidateSize function。 但是，我不確定如何在我的 Plotly-Dash 應用程序上運行這個 javascript 命令。 這就是我目前所擁有的。

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)

任何幫助將不勝感激！

Answer 1

避免此問題的一種可能方法是延遲（初始）map 渲染器，直到父容器變得可見。 這是如何為您的示例實施該方法的說明，

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


def render_map():
    return dl.Map([
        dl.TileLayer(),
        dl.LocateControl(options={'locateOptions': {'enableHighAccuracy': True}})
    ], id="map", style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP], prevent_initial_callbacks=True)
map_collapse = dbc.Collapse(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(_, is_open):
    return not is_open


@app.callback(
    Output("map-collapse", 'children'),
    [Input("map-collapse", "is_open")],
    [State("map-collapse", "children")]
)
def render_map_on_show(_, children):
    if children is not None:
        return dash.no_update
    return render_map()


if __name__ == '__main__':
    app.title = 'Dash App'
    app.run_server()