Skip to content

Map doesn't recenter after interac with the graph on mobile #4942

Open
@safroze-plotly

Description

@safroze-plotly

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3backlogbugsomething broken

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions