You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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)
The text was updated successfully, but these errors were encountered:
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;
The text was updated successfully, but these errors were encountered: