plotly / plotly/plotly.py

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

Open
#4,652 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
18.8k
Forks
2.8k
Avg merge
16h 26m
Merged PRs (30d)
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)



Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the supplied Dash app with Dash 2.17.1 and Plotly 5.22.0, then inspect the update_map callback and the returned figure's mapbox_bounds after switching between Denver and London. Done means both dropdown values render their corresponding map bounds reliably.

Written by the indexing model from the issue text.

Assessment

Tech stack
plotly, python
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.