Scattermapbox figure doesn't render correct bounds in my dash app
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- Python
- Star
- 18.8k
- Fork
- 2.8k
- Merge trung bình
- 16 giờ 26 phút
- Pull request đã merge (30 ngày)
- 21
Mô tả
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)
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu bằng cách chạy ứng dụng Dash được cung cấp với Dash 2.17.1 và Plotly 5.22.0, sau đó kiểm tra callback update_map và mapbox_bounds của figure được trả về sau khi chuyển đổi giữa Denver và London. Hoàn thành khi cả hai giá trị dropdown đều render đáng tin cậy các ranh giới bản đồ tương ứng.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- plotly, python
- Lĩnh vực
- data-visualization
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100