Hi everyone,
I have an app that plots markers at site coordinates in a dcc.Graph using a list of plotly.graph_objs.Scattermapbox for the figure data and a plotly.graph_objs.Layout for the figure layout. I have a drop down menu at the top of my app where one selects a project and then the map updates to show the markers for only the project selected and changes the coordinates of the center of the map to be focus on the selected project. The problem I am having is that once I modify the data being used by the Graph, by changing the project drop down value or applying some other data filtering, I completely loose the ability to zoom in and out on the map with my mouse. This happens both if I have my callback update the figure attribute of a dcc.Graph in the static layout, or if I have my callback update an entire dcc.Graph into the children attribute of a html.Div in the static layout. I have provided a simplified version of my code that experiences this glitch below.
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
mapbox_access_token = 'XXXX'
app = dash.Dash(__name__)
df_all_sites = pd.DataFrame(
{'proj': ['K', 'K', 'H', 'H'], 'id': ['SW', 'SK', 'RH', 'HVO'],
'lat': [35.7189, 35.3347, 21.3711, 19.4201],
'lon': [129.4803, 129.3100, -157.9053, -155.2879]}
)
layout1 = html.Div([
html.H3('Select a Project'),
dcc.Dropdown(
id='dropdown',
options=[{'label': 'Korea', 'value': 'K'},
{'label': 'Hawaii', 'value': 'H'}],
value='H'
),
html.H3('Map of Project Sites'),
dcc.Graph(id='Map1-Graph')
])
app.layout = layout1
@app.callback(
Output('Map1-Graph', 'figure'),
[Input('dropdown', 'value')])
def update_map(proj):
df_all_sites = pd.DataFrame(
{'proj': ['K', 'K', 'H', 'H'], 'id': ['SW', 'SK', 'RH', 'HVO'],
'lat': [35.7189, 35.3347, 21.3711, 19.4201],
'lon': [129.4803, 129.3100, -157.9053, -155.2879]}
)
df_sites = df_all_sites[df_all_sites['proj'] == proj]
dataMap = []
dataMap.append(
go.Scattermapbox(
lat=df_sites['lat'],
lon=df_sites['lon'],
text=df_sites['id'],
mode='markers',
marker=dict(symbol='triangle', size=14, color='black'),
opacity=1.0,
name='Sites'
)
)
layoutM1 = go.Layout(
autosize=True,
hovermode='closest',
mapbox=dict(
accesstoken=mapbox_access_token,
bearing=0,
center=dict(lat=df_sites.iloc[0]['lat'],
lon=df_sites.iloc[0]['lon']),
pitch=0,
zoom=5
)
)
fig = dict(data=dataMap, layout=layoutM1)
return fig
if __name__ == '__main__':
app.run_server(debug=True)
Please let me know you experience the same problem I have been and if you have any suggestions for a fix.
Please note you will need to replace ‘XXXX’ with an actual mapbox accesstoken for the above code to function
Thanks
