Map doesn't recenter after interac with the graph on mobile
Đang mở
Chưa có ai nhận issue này.
bug
P3
- Ngôn ngữ chính
- Python
- Star
- 18.8k
- Fork
- 2.8k
- Merge trung bình
- 16 giờ 26 phút
- Pull request đã merge (30 ngày)
- 21
Mô tả
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)
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu bằng cách chạy sample Dash được cung cấp và tái hiện thao tác với bản đồ trên điện thoại, so sánh với hành vi trên desktop. Theo dõi hành vi cập nhật và căn giữa lại bản đồ từ callback dcc.Graph của sample, sau đó xác minh rằng việc chọn một thành phố sẽ căn giữa lại bản đồ đúng cách sau khi đã thao tác trước đó trên thiết bị di động.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- plotly, python
- Lĩnh vực
- data-visualization
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100