Scattermapbox figure doesn't render correct bounds in my dash app
还没有人认领这个 Issue。
- 主要语言
- Python
- 星标
- 18.8k
- 派生
- 2.8k
- 平均合并
- 16 小时 26 分钟
- 30 天内合并 PR
- 21
描述
I wrote a very simple Dash app in Python that allows the user to select either "Denver" or "London" from a dropdown list. A point is then plotted on a map below the dropdown showing that city. When I run this code, the map does not show the appropriate bounds for London. It seems to be stuck rendering the bounds for Denver, though the map object changes bounds. If I set the default value of the dropdown as "London", the map will only render the bounds for London. I am using Dash version 2.17.1 and Plotly version 5.22.0. Some help in figuring this out would be appreciated!
# third party imports
import dash
import dash_bootstrap_components as dbc
import dash_renderjson
import numpy as np
import pandas as pd
import plotly.graph_objects as go
import requests
from dash import Input, Output, State, callback, dcc, html, callback_context, dash_table
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc
import dash_renderjson
import warnings
from datetime import date
app = dash.Dash(
__name__,
assets_folder="assets",
external_stylesheets=[dbc.themes.BOOTSTRAP],
suppress_callback_exceptions=True,
)
app.layout = dbc.Container(
html.Div(
[
html.Br(),
dbc.Row([html.H1("ShakeMap Sampler")]),
html.Div(id="event-output-container"),
html.Br(),
dbc.Row(
[
dcc.Dropdown(
["Denver", "London"],
value="Denver",
placeholder="Select an Event",
id="event-dropdown",
disabled=False,
),
]
),
dbc.Row(
[
html.Div(
id="graph",
children=dash.dcc.Graph(
id="map",
style={"width": "82vh", "height": "58vh"},
),
),
]
),
],
),
fluid=True,
className="dbc",
)
@callback(
Output("map", "figure"),
Input("event-dropdown", "value"),
State("map", "relayoutData"),
State("map", "figure"),
)
def update_map(value, map_layout, map_state):
# initialize map
map = go.Figure(layout={"hoverdistance": 500, "spikedistance": 500})
map.update_layout(mapbox_style="open-street-map") # stamen-terrain
hovertemp = "<b>Latitude: </b>%{lat} <br> <b>Longitude: </b>%{lon}<extra></extra>"
# plot stations on the map
if value == "London":
station_lon = [-0.13]
station_lat = [51.5]
station_id = ["London"]
map_xmin = -1
map_xmax = 1
map_ymax = 52
map_ymin = 51
elif value == "Denver":
station_lon = [-104]
station_lat = [39]
station_id = ["Denver"]
map_xmin = -105
map_xmax = -103
map_ymax = 40
map_ymin = 38
num_stations = len(station_lon)
text_list = ["station"] * num_stations
map.add_traces(
go.Scattermapbox(
lon=station_lon,
lat=station_lat,
ids=station_id,
legendgrouptitle_text="Map Legend",
legendgroup="group",
name="Stations",
marker_color="rgba(0, 0, 255, 1)",
hovertemplate=hovertemp,
text=text_list,
)
)
# fit bounds for requested event
map.update_layout(
mapbox_bounds={
"west": map_xmin,
"east": map_xmax,
"south": map_ymin,
"north": map_ymax,
}
)
print(map_xmax, map_xmin, map_ymin, map_ymax)
print(map)
return map
# return go.Figure(map)
# Run app
if __name__ == "__main__":
app.run_server(debug=True)
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
首先使用 Dash 2.17.1 和 Plotly 5.22.0 运行提供的 Dash 应用,然后在 Denver 和 London 之间切换后检查 update_map callback 以及返回的 figure 的 mapbox_bounds。只有当两个 dropdown 值都能可靠地渲染各自对应的地图边界时,才算完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- plotly, python
- 领域
- data-visualization
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100