Skip to content

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

Open
@annabelle-mines

Description

@annabelle-mines

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)



Metadata

Metadata

Assignees

No one assigned

    Labels

    P3backlogbugsomething broken

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions