Styjun

I'd like to make a map with the ability to zoom (e.g. using the scroll-wheel). This works at first, but once the map is reloaded, zoom functionality stops working.

Another solution would be to have +/- zoom tools show up on the map.

Here's a minimal script that reproduces the issue.

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

from dash.dependencies import Input, Output, State
import plotly.graph_objs as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_february_us_airport_traffic.csv')

app.layout = html.Div([
 html.Button('Update Graph',id='get'),
 html.P("On first load, zoom works fine. After reloading, zoom doesn't work anymore."),
 dcc.Graph(id='map')
])

@app.callback(
 Output('map', 'figure'),
 [Input('get', 'n_clicks')])
def update_map_callback(n_clicks):
 return 
 'data': [
 go.Scattermapbox(
 lat=df['lat'],
 lon=df['long'],
 mode='markers',
 marker=dict(
 size=4
 )
 )
 ],
 'layout': go.Layout(
 autosize=True,
 hovermode='closest',
 mapbox=dict(
 accesstoken='enter-your-mapbox-key-here',
 center=dict(
 lat=40,
 lon=-100
 ),
 zoom=2
 )
 )

if __name__ == '__main__':
 app.run_server(debug=True)

When the page first pops up, one can zoom in and out on the map. I'd expect after pressing the 'update graph' button, the zooming should still work. However, when one presses the 'Update graph' button, the zoom level on the map becomes fixed.

This issue has come up only recently - i have essentially the same problem that renders my app useless for the moment. See this entry in the community that provides a workaround - if you can live with a clunky replacement for your mouse wheel.

Thanks, had seen that, and while it's better than nothing, its is not really an acceptable workaround. Is there any way to alert mapbox to this issue? This is a major breakage.

I figured it out, thanks to the thread here. Trick is to modify the config. Here's a working example:

import dash
import dash_core_components as dcc
import dash_html_components as html

from dash.dependencies import Input, Output, State
import plotly.graph_objs as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
 html.Button('Update Graph',id='get'),
 html.P("On first load, zoom works fine. After reloading, zoom doesn't work anymore."),
 dcc.Graph(id='map')
])

@app.callback(
 [Output('map', 'figure'),
 Output('map', 'config'),
 ],
 [Input('get', 'n_clicks')])
def update_map_callback(n_clicks):
 map_figure = 
 'data': [
 go.Scattermapbox(
 lat=[32],
 lon=[-110],
 mode='markers',
 marker=dict(
 size=4
 )
 )
 ],
 'layout': go.Layout(
 autosize=True,
 hovermode='closest',
 mapbox=dict(
 accesstoken='pk.eyJ1IjoidG9kZGthcmluIiwiYSI6Ik1aSndibmcifQ.hwkbjcZevafx2ApulodXaw',
 center=dict(
 lat=40,
 lon=-100
 ),
 zoom=2
 )
 )

 map_config = dict(scrollZoom = True)

 return map_figure, map_config

if __name__ == '__main__':
 app.run_server(debug=True)

Similar to @user47389 answer the code modification that worked best for me was setting scrollZoom = True explicitly when I defined the graph object in the first place

dcc.Graph(id='graph', config='scrollZoom': True)

Following the solution found here.