Dropdown dcc.Graph()

Dash Python
1

Hey Guys,

I am trying to update map based on value selected in dropdown (similar to
https://community.plotly.com/t/solved-update-graph-with-value-of-dropdown/6496
But also have a default map to show before a value is selected from the dropdown.

I am not sure what to put in dcc.Graph() in app.layout and what to include below in the callback function.
Currently I can get the initial map with dcc.Graph() to show, but the updated map either opens in a new window
or throws an error.

Here is the dcc.Graph() and dcc.Dropdown()

Blockquote

#child 4- Dropdown

dcc.Dropdown(
id=‘my-dropdown’,
options=options,
style={“border”: “0px solid black”,
#“color”: “white”},
},

  placeholder="Select a Location in Canada",

),

 dcc.Graph(
          style={'height': '500px', 'width' : '900px'},
                        id="mapbox_map",
                        figure=dict(
                            data=[
                                dict(
                                    lat= 62.5,
                                    lon= -80,
                                    type="scattermapbox",
                                )
                            ],
                            layout=dict(
                                mapbox=dict(
                                    layers=[],
                                    accesstoken=mapbox_access_token,
                                    style=mapbox_style,
                                    center=dict(
                                        lat=62.12490, lon=-80.61446
                                    ),
                                    pitch=0,
                                    zoom=1.5,
                                ),
                                autosize=True,
                                    paper_bgcolor= "#1e1e1e",
                                    plot_bgcolor= "#1e1e1e",
                                    margin = {"t": 0, "r": 0, "b": 0, "l": 0},
                            ),
                        ),
                    ),

Blockquote

And here is the map callback:

Blockquote

@app.callback(
dash.dependencies.Output(“mapbox_map”, “figure”),
[dash.dependencies.Input(“my-dropdown”, “value”)
])

def update_map(value, figure):
city=value
new_city=stations[[any([a, b]) for a, b in zip(stations[‘Name’].str.contains(city,flags=re.IGNORECASE,na=False),
stations[‘Name2’].str.contains(city,flags=re.IGNORECASE,na=False))]]
new_city=new_city.sort_values(“ID_NEW”,ascending=[False])
new_city=new_city[:1]
latitude = round(new_city[‘Latitude_x’].values[0], 2),
longitude= round(new_city[‘Longitude_x’].values[0], 2),
new_city=new_city[‘Name’],
new_city=new_city.to_string(),
new_city=new_city[4:],
new_city=new_city.strip().lower(),
new_city=city,
col_names = [‘City’, ‘Latitude’,‘Longitude’],
list_new=[city,latitude,longitude],
df = pd.DataFrame(columns=col_names),
df.loc[len(df)] = list_new,

data = [
    dict(
        latitude = df['Latitude'],
        longitude = df['Longitude'],
        type="scattermapbox",
        hover_name=df['City'],
        marker=dict(size=5, color="white", opacity=0),
    )
]

if "layout" in figure:
    zoom = 4.0
    latitude = df['Latitude']
    longitude = df['Longitude']
  
else:
    zoom = 4.0
    latitude = 62.7272
    longitude = -90.991251

            
layout = dict(
    mapbox=dict(
    layers=[],
    accesstoken=mapbox_access_token,
    style=mapbox_style,
    mapbox_style="open-street-map",
    mapbox_center_lat = 63,
    center=dict(lat=latitude, lon=longitude),
    zoom=zoom,
    ),
    hovermode="closest",
    margin=dict(r=50, l=50, t=0, b=0),
    dragmode="lasso",
    )
           
figure = dict(data=data, layout=layout)
return figure

Blockquote
I know it is a mess but I am new to Dash and do not understand what needs to be included in dcc.Graph()
as well as in the callback function below. There is also another callback that prints some text based on the
same input ‘value’ used in the map callback, but I could not get it to work using the same input with two
outputs.

Any help would be appreciated!
Cheers