Sliders on px.scatter_mapbox not preserved after fig.append_trace

📊 Plotly Python
1 
        moment = ['average lag','median lag']
        web_df.reset_index(inplace=True)
        for i in range(len(moment)):
            web_df[moment[i]] = pd.to_datetime(web_df[moment[i]].astype(str))
            web_df[moment[i]] = 60*60*web_df[moment[i]].dt.hour+60*web_df[moment[i]].dt.minute+web_df[moment[i]].dt.second
        web_df = web_df.dropna()
        fig = make_subplots(rows=2,cols=1,specs=[[{'type':'mapbox'}],[{'type':'mapbox'}]])
        fig.append_trace(px.scatter_mapbox(web_df, lat="latitude", lon="longitude",animation_frame='hour_of_day', animation_group = 'state',hover_name='station_id',hover_data = [moment[0]],
        size=moment[0],zoom=5.8, height=1000,center={'lat':3.9457,'lon':108.1429}).data[0],row=1,col=1)
        fig.append_trace(px.scatter_mapbox(web_df, lat="latitude", lon="longitude",animation_frame='hour_of_day', animation_group = 'state',hover_name='station_id',hover_data = [moment[1]],
        size=moment[1],zoom=5.8, height=1000,center={'lat':3.9457,'lon':108.1429}).data[0],row=2,col=1)
        fig.update_mapboxes(style='open-street-map')
        fig.update_layout(mapbox_style="open-street-map")

Hi everyone, with the code above, I could obtain the plot as shown in this diagram

plotly_forum01
plotly_forum011805×863 96.3 KB

There are several issues with it:
a) It did not preserve the zoom and center of the map
b) It also did not preserve the sliders that i initialized via animation_frame

I would appreciate any help in fixing these issues. Thanks so much

2

Hey guys, I managed to get it to work the way i wanted it

plotly_forum02
plotly_forum021851×981 87.4 KB

It’s a bit of a hack but this is the code I used:

        mapalertstr = str('<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>')
        for i in range(len(moment)):
            web_df[moment[i]] = pd.to_datetime(web_df[moment[i]].astype(str))
            web_df[moment[i]] = 60*60*web_df[moment[i]].dt.hour+60*web_df[moment[i]].dt.minute+web_df[moment[i]].dt.second
        web_df = web_df.dropna()
        for i in range(len(moment)):
            fig = px.scatter_mapbox(web_df, lat="latitude", lon="longitude",animation_frame='hour_of_day', animation_group = 'state',hover_name='station_id',hover_data = [moment[i]],
            size=moment[i],zoom=5.8, height=1000,center={'lat':3.9457,'lon':108.1429})
            fig.update_layout(mapbox_style="open-street-map")
            mapalertstr += '<br>'+str(moment[i])+'<br>'
            mapalertstr += plotly.offline.plot(fig,include_plotlyjs=False,output_type='div')
  1. I introduced <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> in the html file
  2. I saved fig in plotly.offline.plot(fig,include_plotlyjs=False,output_type='div') as per https://stackoverflow.com/questions/37683147/getting-script-and-div-tags-from-plotly-using-python

Regards