Smooth animations in scattermapbox

Dash Python
1

Hi,
I am plotting some time dependant positions on a map with scattermapbox and while updating the positions works fine with a callback, the points “jump” on the map. I would like achieve a smooth movement instead (as in the (as in plot.ly/python/animations/ , I can only use two links). I found a topic on the forum that made me believe that adding animate=True would be the solution, but it doesn’t seem to work for me.

Does anybody have any pointers?

I have also tried the frames approach as in this example, but it doesn’t move smoothly either.

Minimal, not working example

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

import numpy as np

DEFAULT_ZOOM = 7
DEFAULT_LAT = 48
DEFAULT_LON = 10
DEFAULT_BEARING = 0

MAPBOX_ACCESS_TOKEN = (
   'xyz'
)

app = dash.Dash(__name__)


slider = dcc.Slider(
    min=0,
    max=10,
    value=5,
    marks=dict(),
    included=False,
    id='timeslider',
    updatemode='drag',
    step=1,


)

app.layout = html.Div([
    dcc.Graph(id='map'),
    slider,
    html.Div(id='timevalue', style={'margin-top': 20})

])


@app.callback(Output('timevalue', 'children'),
              [Input('timeslider', 'value')])
def display_value(value):
    return str(value)


@app.callback(Output('map', 'figure'),
              [Input('timeslider', 'value')])
def update_map(value):
    fig = {
        'animate': True,
        'layout': {
            'animate': True,
            'mapbox': {
                'accesstoken': MAPBOX_ACCESS_TOKEN,
                'center': {
                    'lon': DEFAULT_LON,
                    'lat': DEFAULT_LAT,
                },
                'style': 'light',
                'zoom': DEFAULT_ZOOM,
            },
            'margin': {
                'l': 0, 'r': 0, 'b': 0, 't': 0
            },
        }
    }
    fig['data'] = [{
        'lat': np.random.random(200) * 10 + 40,
        'lon': np.random.random(200) * 5 + 5,
        'type': 'scattermapbox',
        'animate': True,
        'marker': {
            'color': np.random.random(200),
            'size': 8,
            'opacity': 0.6
        },
    }]
    return fig


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