Putting a pin/marker on an animated chloropleth mapbox

Dash Python
1

Hi,

I am currently working with an animated chloropleth mapbox, I’m already using the base layer for a metric. Now I need to put a pin or marker on several different coordinates, I can only find documentation for doing this on the scattermapbox, which from my current attempts does not translate. My code is below and works perfectly as is. Anyone have an ideas? Much appreciated.

frames = [{   
    'name':'frame_{}'.format(today),
    'data':[{
        'type':'choroplethmapbox',
        'z':df['z_score_'+today],
        'locations' : df['ids'], 
        'colorscale' : 'hot_r',
        'colorbar' : dict(thickness=20, ticklen=3),
        'geojson' : new_jfile,
        'text' : df['coordinates_'+today],
        'hovertemplate' : '<br> <b>Hot Spot </b>: %{z}<br>',
        'marker_line_width':0.1, 
        'marker_opacity': 0.7
    }],           
} for today in dates]  

sliders = [{
    'transition':{'duration': 5},
    'x':0.08, 
    'len':0.88,
    'currentvalue':{'font':{'size':15}, 'visible':True, 'xanchor':'center'},  
    'steps':[
        {
            'label':today,
            'method':'animate',
            'args':[
                ['frame_{}'.format(today)],
                {'mode':'immediate', 'frame':{'duration':1000, 'redraw': True}, 
                 'transition':{'duration':150}}
              ],
        } for today in dates]
}]

play_button = [{
    'type':'buttons',
    'buttons':[{ 
        'label':'Play', # Play
        'method':'animate',
        'args':[None]
    }]
}],

# Adding all sliders and play button to the layout
layout = go.Layout(
    sliders=sliders,
    updatemenus=[{
    'type':'buttons',
    'showactive':True,
    'x':0.045, 'y':-0.08,
    'buttons':[{ 
        'label':'Play', # Play
        'method':'animate',
        'args':[
            None,
            {
                'frame':{'duration':1000, 'redraw':True},
                'transition':{'duration':150},
                'fromcurrent':True,
                'mode':'immediate',
            }
        ]
    }]
}],
    mapbox={
        'accesstoken':mapbox_access_token,
        'center':{"lat": 40.0086, "lon": -105.28},
        'zoom':6,
        'style':'light',
    }
)

# Creating the figure
fig = go.Figure(data=data, layout=layout, frames=frames)

######update figure
fig.update_layout(title_x =0.5, width=1250, height=1200,
                 mapbox = dict(center= dict(lat=40.0086, lon=-105.275),            
                               accesstoken= mapbox_access_token,
                               zoom=11
                               ))

# Displaying the figure
fig.show()

Which produces the following…

Screen Shot 2020-09-18 at 4.07.02 PM
Screen Shot 2020-09-18 at 4.07.02 PM951×864 191 KB

2

Hi @devinburke0,

To animate simultaneously a choroplethmapbox and a Scattermapbox, define first the corresponding traces
to be updated by each frame:

fig = px.choropleth_mapbox(...)
fig.add_trace(Scattermapbox(...))

Frame definition:

frames =[go.Frame(data=[go.Chroplethmapbox(updates for trace fig.data[0]),
                        go.Scattermapbox(updates for trace fig.data[1])],
                  traces =[0, 1],  #This line informs plotly.js that each frame, frames[k].data[0], updates fig.data[0], 
                                   #and frames[k].data[1] updates fig.data[1]
                  name=f'frame {k}') for k in range(number_of_frames)
        ]

buttons
sliders

Example: https://chart-studio.plotly.com/~empet/15815/#/