[英]How do I invalidateSize of my leaflet map contained in a bootstrap collapse element on my Dash app?
我正在努力添加一个包含 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)
任何帮助将不胜感激!
避免此问题的一种可能方法是延迟(初始)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()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.