[Python] How to connect betweend dropdown input and Folium map as output in plotly Dash

I have a dashboard with dropdown menu as input with years and data table as output which will be filtered by the input in the dropdown. Now i want to add another output as Folium haetmap, but i get an error ValueError: Location values cannot contain NaNs, i checked few times and there are no NaNs at all in latitude and longitude columns. It has to be something else.

This is my code (i add comments when i put new lines of code):

from folium.plugins import HeatMap
import folium

# New plot_map finction
def plot_map(df):
m = folium.Map(location=[df['latitude'].mean(), df['longitude'].mean()], zoom_start=2)
src_doc = m.get_root().render() #obtain the HTML content
return src_doc


app= dash.Dash(__name__)

app.layout= html.Div([
html.H1("Total Medals of Each Country", style={'text-alugn':'center', 'color':'white'}),
dcc.Dropdown(id='select_year',
options=np.array(results_country.year.unique(), dtype=np.int64).tolist(),
multi=True,
value= '',
style={'width':'40%'}
),
html.Br(),
html.Div([
dash_table.DataTable(
id='datatable_id',
data=results_country.to_dict('records'),
columns=[
{"name":i, "id":i, "deletable":False, "selectable":False} for i in results_country.columns
],
editable=False,
filter_action="native",
sort_action="native",
row_selectable="multi",
row_deletable=False,
selected_rows=[],
page_action="native",
page_current=0,
page_size=6,
# page_action='none',
# style_cell={'whiteSpace': "normal"},
# fixed_rows={'headers':True, 'data':0},
# virtualization=False,
style_cell_conditional=[{'width':'40%'}],
)
]),
html.Br(),
# New Div for graph object
html.Div(id='medalist_graph'),

])

@app.callback(
Output(component_id='datatable_id', component_property='data'),
Input(component_id='select_year', component_property='value')
)
def update_table(option_selected):
dff= results_country.copy()
dff = dff.query('year==@option_selected')

return (dff.to_dict('records'), 'New return object' html.Iframe(srcDoc=plot_map(dff), style={'width': '800px', 'height': '500px'}))

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


I pretty sure i'm missing something with my graph output.

May someone tell where i mess my code? At the beginning i thought maybe to give some initial coordinates at the app.layout, but it doesn't work

html.Div([
dcc.Graph(id='heatmap',
figure = {
'data': [
m = folium.Map(location=[df['latitude'].mean(), df['longitude'].mean()], zoom_start=2)
heat_data = [[row['latitude'], row['longitude']] for index, row in df.iterrows()]
HeatMap(heat_data).add_to(m)
m
],
})
])


Thank you

Continue reading...