如何使我的 Dash 应用程序的 bootstrap 折叠元素中包含的传单地图无效？

Question

我正在努力添加一个 bootstrap 折叠元素，其中包含一张传单地图，以便我可以切换 open/close 地图视图。但是，传单地图会在应用程序初始化时调整大小，并且在打开折叠项目时不会调整大小。因此，打开时显示的地图大多只是一个灰色框。在做了一些研究之后，似乎我必须在打开折叠元素后在我的地图上调用 invalidateSize 函数。但是，我不确定如何在我的 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

避免此问题的一种可能方法是延迟（初始）地图渲染器，直到父容器变得可见。这是如何为您的示例实施该方法的说明，

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()

如何使我的 Dash 应用程序的 bootstrap 折叠元素中包含的传单地图无效？

How do I invalidateSize of my leaflet map contained in a bootstrap collapse element on my Dash app?

javascript

leaflet

bootstrap-4

plotly-dash

dash-leaflet