How to refresh python folium (map.html file) after integrating it with dash app?

Question

I am new to python programming and Dash so please forgive me if I say something wrong. I am working with folium library and Dash. I have found this example on stackoverflow and I have converted folium map to an html document and passed that html doc into Dash (working with iframe component) and I have it displayed on my app.

Here is my code for displaying my app with Dash:

app = dash.Dash()

app.layout = html.Div([
    html.H1('My first app with folium map'),
    html.Iframe(id='map', srcDoc=open('example_map.html', 'r').read(), width='100%', height='600'),
    html.Button(id='map-submit-button', n_clicks=0, children='Submit')
])


@app.callback(
    dash.dependencies.Output('map', 'srcDoc'),
    [dash.dependencies.Input('map-submit-button', 'n_clicks')])
def update_map(n_clicks):
    if n_clicks is None:
        return dash.no_update
    else:
        return html.Div([
            html.H1('My first app with folium map'),
            html.Iframe(id='map', srcDoc=open('example_map.html', 'r').read(), width='100%', height='600'),
            html.Button(id='map-submit-button', n_clicks=0, children='Submit')
        ])


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

Now I am trying to refresh folium map (the html document that I have passed into Dash) using an app.callback in case the coords, from the html doc, are taken from a json API (which are being refreshed every 30sec), but it seems not working. Is this close to the proper way to do it? If not, how should I? Thank you in advance!!

Answer 1

The issue is that you're returning an entire html.Div component to the src property of your iFrame, which is more than you want. Your callback should be:

@app.callback(
    dash.dependencies.Output('map', 'srcDoc'),
    [dash.dependencies.Input('map-submit-button', 'n_clicks')])
def update_map(n_clicks):
    if n_clicks is None:
        return dash.no_update
    else:
        return open('example_map.html', 'r').read()

This will return the HTML string of the map each time the button is clicked. The HTML string will be substituted for the 'srcDoc' property of the 'map' component of your app. I didn't test this, so let me know if it's still not working.

Hope this helps!

Answer 2

I had the same question and so I just tried the solution. I think the IF statement needs to be changed to 'if n_clicks == 0' instead of 'n_clicks is None'. When it is the later, the map automatically updates before you press the button.

@app.callback(
    dash.dependencies.Output('map', 'srcDoc'),
    [dash.dependencies.Input('map-submit-button', 'n_clicks')])
def update_map(n_clicks):
    if n_clicks == 0:
        return dash.no_update
    else:
        return open('example_map.html', 'r').read()

Let me know if I'm missing something :) I'm pretty new to Dash.