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 heatmap, 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
 ],
 })
 ])