Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
safroze-plotly opened this issue Dec 13, 2024 · 0 comments
Open

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

safroze-plotly opened this issue Dec 13, 2024 · 0 comments
Labels
bug something broken P3 backlog

Comments

@safroze-plotly
Copy link

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)

@gvwilson gvwilson added bug something broken P3 backlog labels Dec 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug something broken P3 backlog
Projects
None yet
Development

No branches or pull requests

2 participants