Failing to maintain zoom and position with ScatterMapBox after hover

Dash Python
1

I’m making an interactive map with Dash but once I hover at some point on the map, zoom and position resets to initial state.

I’ve tried passing relayout_data to figure properties but it somehow crashes the entire browser tab. (relayout data returns OK, but setting a figure with a new zoom and position values results in a crash).

Here’s what I’ve tried:

@app.callback(
    Output('graph1', 'figure'),
    [Input('graph1', 'hoverData')],
    [State('graph1', 'relayoutData')])
def update_graph(data, relayout_data):
    new_figure = copy.deepcopy(fig)
    if relayout_data:
        new_figure['mapbox.center.lon'] = relayout_data['mapbox.center']['lon']
        new_figure['mapbox.center.lat'] = relayout_data['mapbox.center']['lat']
        new_figure['mapbox.zoom'] = relayout_data['mapbox.zoom']

Thanks in advance!

2

Check out uirevision 📣 Preserving UI State, like Zoom, in dcc.Graph with uirevision that was created for exactly this purpose. TLDR: set fig.layout.uirevision=True or any other truthy value and don’t change it until you want user-interaction changes dropped.

That said I see someone else was having problems with this specifically on a mapbox graph Uirevision + mapbox so perhaps I’ll head over there and see if they sorted it out.

1 Like