Open
Description
The app works completely fine on computer but has issues recenter on phone after interacing with the map a bit.
Heres a sample app for replicating the issue;
import dash
from dash import dcc, html, Input, Output
import plotly.express as px
import plotly.graph_objects as go
# Create a Dash app
app = dash.Dash(__name__)
# City data with coordinates
cities = {
"New York": {"lat": 40.7128, "lon": -74.0060},
"London": {"lat": 51.5074, "lon": -0.1278},
"Tokyo": {"lat": 35.6895, "lon": 139.6917},
"Sydney": {"lat": -33.8688, "lon": 151.2093},
"Toronto": {"lat": 43.651070, "lon": -79.347015},
}
# Initial map centered at a default location
fig = go.Figure(go.Scattermapbox())
fig.update_layout(
mapbox_style="open-street-map",
mapbox_center={"lat": 0, "lon": 0},
mapbox_zoom=1,
)
# App layout
app.layout = html.Div([
html.H1("City Map Viewer", style={"textAlign": "center"}),
dcc.Dropdown(
id="city-dropdown",
options=[{"label": city, "value": city} for city in cities.keys()],
placeholder="Select a city",
style={"width": "50%", "margin": "auto"}
),
dcc.Graph(id="map", figure=fig)
])
# Callback to update the map based on dropdown selection
@app.callback(
Output("map", "figure"),
Input("city-dropdown", "value")
)
def update_map(selected_city):
if not selected_city:
return fig # Return the default map if no city is selected
# Get the coordinates of the selected city
city_coords = cities[selected_city]
# Update the map figure
new_fig = go.Figure(go.Scattermapbox())
new_fig.update_layout(
mapbox_style="open-street-map",
mapbox_center={"lat": city_coords["lat"], "lon": city_coords["lon"]},
mapbox_zoom=10,
)
# Add a marker for the selected city
new_fig.add_trace(go.Scattermapbox(
lat=[city_coords["lat"]],
lon=[city_coords["lon"]],
mode="markers",
marker=dict(size=10, color="red"),
text=[selected_city],
))
return new_fig
# Run the app
if __name__ == "__main__":
app.run_server(debug=True)