Black Lives Matter. Please consider donating to Black Girls Code today.

Smoother Live Updates with scattermapbox?

Hello, I am using scattermapbox from mapbox for a dashboard that tracks realtime bus gps from an api.
I have it set to update at a relatively slow interval of 5 seconds.

The only problem is that every time it updates the whole map reloads and not just the data points. Now I don’t mean that the viewing position changes and reverts back to the default I got that to stay, but rather every time it reloads the whole map goes grey with the loading icon then loads back with the new data points on it.

Is there any way to make this smoother? ie maybe just reload the data points without reloading the actual map underneath?

or am I not using the best tools for this project and is there another that would be better?

Try setting animate=True inside dcc.Graph. This property is sort of in “beta” and so it won’t work in all use cases, namely:

  • it won’t work if you are adding or removing traces (i.e. elements inside data). However, if you only have N traces (N=len(fig['data'])), and N is constant within your callbacks, you should be good.
  • if the range of your data changes, the graph won’t reset to the new range. You’ll need to set that automatically.

These issues are reported and discussed in https://github.com/plotly/plotly.js/issues/1849.

3 Likes

animate=True in dcc.Graph got it working for me.

Thank you so much!

1 Like

Although it does animate smoothly, adding the Animate=True has broken my ability to keep the camera’s location after reload. It only stops working if I include Animate=True. And the range of my data stays constant.

If you change the camera’s location/zoom before the first callback it will stay at that location and zoom and reload to that after all future callbacks no matter what I’ve tried.

I know you said that it is still in beta so it may not work, which is fine, I’m just wondering if this is common or possible to be worked around?