plotly / plotly/plotly.py

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

オープン
#4,652 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

bug P3
主要言語
Python
スター
18.8k
フォーク
2.8k
平均マージ
16時間 26分
マージ済み PR(30日)
21

説明

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)



コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、提供された Dash アプリを Dash 2.17.1 と Plotly 5.22.0 で実行し、Denver と London を切り替えた後に、update_map callback と返された figure の mapbox_bounds を調べます。両方の dropdown 値で対応する地図の境界が確実にレンダリングされれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
plotly, python
領域
data-visualization
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。