✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

How do I combine multiple animated plotly.express.scatter_mapbox traces on a map?

Having the data of 2 migrating birds equipped with gps-transponders, I would love to visualize their movements on a map with the help of plotly.express.scatter_mapbox.

Each dataframe (or bird) consists of three simple columns: timestamp (date), latitude(location_lat), longitude(location_long). The timestamp column can be used to animated the plot since the birds are moving from one place to the other each day.

I can get the first dataframe (“arthur_df”) to work with no prolem: I see the route of all points and can also animate the movement of the point via the timestamps column.

My problem lies in adding the second dataframe. On the plot/map, only the first gps coordinate ist shown as a dot but there’s no movement of the dots along the timeline, the dot of the dataframe ‘gustav_df’ is stuck in its starting place.

This is my code

import pandas as pd
import plotly.express as px

mapbox_access_token = "xyz" #one could use openstreetmap instead, access token hidden

fig = px.scatter_mapbox(  
        lat=dictionary['arthur_df'][0]["location_lat"],
        lon=dictionary['arthur_df'][0]["location_long"],
        animation_frame = dictionary['arthur_df'][0]["timestamp"])

fig.add_trace(px.scatter_mapbox(  
          lat=dictionary['gustav_df'][0]["location_lat"],
          lon=dictionary['gustav_df'][0]["location_long"],
          animation_frame = dictionary['gustav_df'][0]["timestamp"]).data[0]) #I use .data[0] to access the trace of the scatter_mapbox object

fig.update_layout(
    mapbox=dict(accesstoken=mapbox_access_token))

fig.update_layout(mapbox_style="satellite")
fig.update_layout(margin={"r":2,"t":1,"l":1,"b":1})

fig.show() #arthur_df is shown on the map, the other df is frozen

Same problem here. Did someone find a solution?

I believe that this may be a situation where you need to use frames (as per the bottom few examples here: Intro to Animations | Python | Plotly). As far as I can tell, it seems that if you want multiple traces in an animated plot, you have to use frames rather than add_trace.

If you find a way that doesn’t use them definitely let me know, that would be a lot easier!