Open
Description
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)