Scattermapbox figure doesn't render correct bounds in my dash app
まだ誰も着手していません。
- 主要言語
- Python
- スター
- 18.8k
- フォーク
- 2.8k
- 平均マージ
- 16時間 26分
- マージ済み PR(30日)
- 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 にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
まず、提供された Dash アプリを Dash 2.17.1 と Plotly 5.22.0 で実行し、Denver と London を切り替えた後に、update_map callback と返された figure の mapbox_bounds を調べます。両方の dropdown 値で対応する地図の境界が確実にレンダリングされれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- plotly, python
- 領域
- data-visualization
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100