ScatterMapbox can't maintain the current zoom area with live update

Dash Python
1

Hi Experts,

I’m creating a live update to show some number on maps, the problem is that after every call back is fire, the zoom area resets to initial state.

I have checked by setting ‘uirevision = True’, Preserving UI State, like Zoom, in dcc.Graph with uirevision.

But unfortunately it does not work for me.

Code is here as below:

-- coding: UTF-8 --

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
import pandas as pd
from dash.dependencies import Input, Output

mapbox_access_token = r’pk.eyJ1IjoieWluY2hhb…’

app = dash.Dash(name)

app.layout = html.Div([

dcc.Graph(
    id='density-map',      
),    

html.Label('Dataset'),
dcc.Dropdown(
    id='dataset',
    options=[{'label': i, 'value': i} for i in df_new.columns],
    value=df_new.columns[0]
),  

dcc.Interval(
    id='interval-component',
    interval=3*1000, # in milliseconds
    n_intervals=0    
),

])

@app.callback(
Output(‘density-map’, ‘figure’),
[Input(‘interval-component’, ‘n_intervals’),
Input(‘dataset’, ‘value’)])
def generate_fig(n_intervals,dataset):

df = pd.read_csv(r'20191207 151623.csv')

fig = go.Figure(go.Scattermapbox(
    fill='toself',
    mode = "markers+text",textposition='bottom center',
    lon = Long_list,
    lat = Lat_list,
    marker = {'color': '#636efa'},          
    name='',
    hoverinfo='name+text',
    subplot='mapbox',
    hoverlabel_namelength =30,
))

#to show number on map
for index in df_low.index:

    fig.add_trace(
        go.Scattermapbox(
            lon = [(df_low['long_r'].loc[index] + df_low['long_l'].loc[index])/2],
            lat = [(df_low['lat_r'].loc[index] + df_low['lat_l'].loc[index])/2],
            text = str(df_low['TRAFFIC.USER.AVG'].loc[index])[:3],
            mode = 'markers+text',
            textfont=dict(color="black",size=20),
            textposition = 'bottom center',       
            name=df_low['cell name'].loc[index],
            hoverinfo='name',
            hoverlabel_namelength =30            
        )    
)

fig.update_layout(
    uirevision = True,
    mapbox = {'style':"satellite",
              'center': {'lon': 101.413412, 'lat': 14.626372},
               'zoom': 15,
              'accesstoken':r"pk.eyJ1IjoieWluY2hhbmdqaWFuIiwiYSI6ImNrM3gweXN5NDBmeXQzcHBpY2NkNXpiajMifQ.ruT1mpQ_j_T-ODNxEUIWfw"
              },
    showlegend = True 
    )     
    
return fig

if name == ‘main’:
app.run_server(host=‘127.0.0.1’, port=8053, debug=True)

2

thanks for reporting! yes, this is a bug unfortunately: https://github.com/plotly/plotly.js/issues/4551

you might have some luck removing center, but i haven’t tried that

3

Thank you for the quick reply, sir.
And I have tried to removed the center, the issue is still persisting.