Callback error updating world-choropleth.figure

Dash Python
1

I am trying to build a dashboard that includes dropdowns and a map.
What I am trying to achieve here is that by selecting an indicator & a date and hovering on the map, dashboard will show the value of that indicator associated with a particular location in a particular date. However, I will always get an error message:‘Callback error updating world-choropleth.figure’ and ‘ValueError: Lengths must match to compare’, which has something to do with this line:
‘dff = df[(df[‘date’] == sdate)& (df[‘indicator’] == selected_market_indicator)]’

I have try my best to make sure ‘sdate’&‘selected_market_indicator’ are in the same length as values in df columns and I think date works fine here. Could anyone please help me?

This is how I wrote my dropdown.
dcc.Dropdown(
id=‘select-indicator’,
options=[{‘label’: i, ‘value’: i} for i in indicators],
value=‘Germany’,
multi=True)

@app.callback(
Output(component_id=‘world-choropleth’, component_property=‘figure’),
[Input(component_id=‘select-date’, component_property=‘date’),
Input(component_id=‘select-indicator’, component_property=‘value’)],
[State(‘world-choropleth’,‘figure’)]
)
def update_map(selected_date, selected_market_indicator, figure):
sdate = convert(selected_date)
dff = df[(df[‘date’] == sdate)
& (df[‘indicator’] == selected_market_indicator)]
data = [
go.Scattermapbox(
lat=dff[“lat”],
lon=dff[“lon”],
mode=‘markers’,
marker=dict(size=5, color=“white”, opacity=0),
)
]

if "layout" in figure:
    lat = figure["layout"]["mapbox"]["center"]["lat"]
    lon = figure["layout"]["mapbox"]["center"]["lon"]
    zoom = figure["layout"]["mapbox"]["zoom"]
else:
    lat = (38.72490,)
    lon = (-95.61446,)
    zoom = 3.5
layout = dict(
    mapbox=dict(
        accesstoken=mapbox_access_token,
        style=mapbox_style,
        center=dict(lat=lat, lon=lon),
        zoom=zoom,
    ),
    hovermode="closest",
    margin=dict(r=0, l=0, t=0, b=0),
)
fig = dict(data=data,layout=layout)
return fig