I am replicating the example from the plotly website to get a customized tooltip for my Scattermapbox (https://dash.plotly.com/dash-core-components/tooltip)
However, the results that I am getting are completely off (e.g. I hover over Shanghai, I get the results for Barcelona, etc.). I cannot seem to find what’s wrong in the code.
Find simplified sample below:
# Layout
html.Div([
dcc.Graph(id='map_graph_fav', clear_on_unhover=True)]),
dcc.Tooltip(id='graph-tooltip')
])
# Callback for map
@callback(
Output('map_graph_fav', 'figure'),
Input('submit_button_fav', 'n_clicks'),
State('country_dropdown_fav', 'value'),
State('city_dropdown_fav', 'value'),
State('property_type_dropdown_fav', 'value')
)
def update_map(n_clicks, selected_country, selected_city, selected_building):
df_map = df[(df['Country'].isin(selected_country)) &
(df['City'].isin(selected_city)) &
(df['Building Type'].isin(selected_building))]
if n_clicks is None:
return dash.no_update
else:
px.set_mapbox_access_token(mapbox_access_token)
fig = px.scatter_mapbox(df_map, lat='Latitude', lon='Longitude', size='Annual Rent', color='Favourability', text='City')
return fig
# Callback for tooltip
@callback(
Output('graph-tooltip', 'show'),
Output('graph-tooltip', 'bbox'),
Output('graph-tooltip', 'children'),
Input('map_graph_fav', 'hoverData'),
)
def display_hover(hoverData):
if hoverData is None:
return False, dash.no_update, dash.no_update
# demo only shows the first point, but other points may also be available
pt = hoverData['points'][0]
bbox = pt['bbox']
num = pt['pointNumber']
df_row = df.iloc[num]
print(df_row)
name = df_row['City']
form = df_row['Country']
children = [
html.Div([
html.H2(f"{name}", style={"color": "darkblue"}),
html.P(f"{form}"),
], style={'width': '200px', 'white-space': 'normal'})
]
return True, bbox, children
Example current output:
