plotly / plotly/plotly.py

Scattermapbox figure doesn't render correct bounds in my dash app

Ouverte
#4,652 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

bug P3
Langage dominant
Python
Étoiles
18.8k
Forks
2.8k
Merge moyen
16 h 26 min
PR mergées (30 j)
21

Description

I wrote a very simple Dash app in Python that allows the user to select either "Denver" or "London" from a dropdown list. A point is then plotted on a map below the dropdown showing that city. When I run this code, the map does not show the appropriate bounds for London. It seems to be stuck rendering the bounds for Denver, though the map object changes bounds. If I set the default value of the dropdown as "London", the map will only render the bounds for London. I am using Dash version 2.17.1 and Plotly version 5.22.0. Some help in figuring this out would be appreciated!

# third party imports
import dash
import dash_bootstrap_components as dbc
import dash_renderjson
import numpy as np
import pandas as pd
import plotly.graph_objects as go
import requests
from dash import Input, Output, State, callback, dcc, html, callback_context, dash_table
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc
import dash_renderjson
import warnings
from datetime import date


app = dash.Dash(
    __name__,
    assets_folder="assets",
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    suppress_callback_exceptions=True,
)
app.layout = dbc.Container(
    html.Div(
        [
            html.Br(),
            dbc.Row([html.H1("ShakeMap Sampler")]),
            html.Div(id="event-output-container"),
            html.Br(),
            dbc.Row(
                [
                    dcc.Dropdown(
                        ["Denver", "London"],
                        value="Denver",
                        placeholder="Select an Event",
                        id="event-dropdown",
                        disabled=False,
                    ),
                ]
            ),
            dbc.Row(
                [
                    html.Div(
                        id="graph",
                        children=dash.dcc.Graph(
                            id="map",
                            style={"width": "82vh", "height": "58vh"},
                        ),
                    ),
                ]
            ),
        ],
    ),
    fluid=True,
    className="dbc",
)


@callback(
    Output("map", "figure"),
    Input("event-dropdown", "value"),
    State("map", "relayoutData"),
    State("map", "figure"),
)
def update_map(value, map_layout, map_state):

    # initialize map
    map = go.Figure(layout={"hoverdistance": 500, "spikedistance": 500})
    map.update_layout(mapbox_style="open-street-map")  # stamen-terrain
    hovertemp = "<b>Latitude: </b>%{lat} <br>   <b>Longitude: </b>%{lon}<extra></extra>"

    # plot stations on the map
    if value == "London":
        station_lon = [-0.13]
        station_lat = [51.5]
        station_id = ["London"]
        map_xmin = -1
        map_xmax = 1
        map_ymax = 52
        map_ymin = 51
    elif value == "Denver":
        station_lon = [-104]
        station_lat = [39]
        station_id = ["Denver"]
        map_xmin = -105
        map_xmax = -103
        map_ymax = 40
        map_ymin = 38
    num_stations = len(station_lon)
    text_list = ["station"] * num_stations
    map.add_traces(
        go.Scattermapbox(
            lon=station_lon,
            lat=station_lat,
            ids=station_id,
            legendgrouptitle_text="Map Legend",
            legendgroup="group",
            name="Stations",
            marker_color="rgba(0, 0, 255, 1)",
            hovertemplate=hovertemp,
            text=text_list,
        )
    )
    # fit bounds for requested event
    map.update_layout(
        mapbox_bounds={
            "west": map_xmin,
            "east": map_xmax,
            "south": map_ymin,
            "north": map_ymax,
        }
    )
    print(map_xmax, map_xmin, map_ymin, map_ymax)
    print(map)

    return map
    # return go.Figure(map)


# Run app
if __name__ == "__main__":
    app.run_server(debug=True)



Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par exécuter l’application Dash fournie avec Dash 2.17.1 et Plotly 5.22.0, puis inspectez le callback update_map et les mapbox_bounds de la figure renvoyée après avoir basculé entre Denver et Londres. C’est terminé lorsque les deux valeurs du dropdown rendent de manière fiable les limites de carte correspondantes.

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é
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.