Map doesn't recenter after interac with the graph on mobile
Personne n'a encore pris cette issue.
- Langage dominant
- Python
- Étoiles
- 18.8k
- Forks
- 2.8k
- Merge moyen
- 16 h 26 min
- PR mergées (30 j)
- 21
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)
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par exécuter l’exemple Dash fourni et reproduire l’interaction avec la carte sur un téléphone, en la comparant au comportement sur ordinateur. Suivez le comportement de mise à jour et de recentrage de la carte à partir du callback dcc.Graph de l’exemple, puis vérifiez que la sélection d’une ville recentre correctement la carte après une interaction préalable sur mobile.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- plotly, python
- Domaine
- data-visualization
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100