Folium maps and Dash

Dash Python
1

Hello - is there anyway I can deploy a dash app with a folium map that I have already created? It doesn’t have to interact with the dash app, I would just like them in the same place?

2

If you can export your folium map as a standalone HTML file (i.e. with JS and CSS embedded inside it), then you might be able to embed it in the Dash app with

your_folium_html_string = '...'
html.Iframe(srcDoc=your_folium_html_string)
3

I was able to save the map as an html file with everything exported, and when I passed it into the

map = "test.html" app.layout = html.Div(html.Iframe(srcDoc = map))
I get an iframe window that just says “test,html”

suggestions?

4

The srcDoc has to be the HTML string, not the HTML file. Try:

app.layout = html.Iframe(srcDoc = open('test.html', 'r').read())
1 Like
5

good job man!! It works !

This problem made me crazy these days .
I rendered a map of china by flask and echarts and generated a html file .
I want to insert it to a dash app by all means but failed.
YOU make me free, man !!!

I have ANOTHER question ,how to make the frame of the Iframe object invisible ？
thanks.

2 Likes
6

nice!!
to remove the border, try style={‘border’: ‘none’}

7

Thanks. It works.




梁凡

邮箱：tasselmi@yeah.net

签名由 网易邮箱大师 定制

1 Like
8

I have a ‘unique’ experience with iFrame in handling folium map.

I have 2 page dashboard. each of page, i use iFrame to load the folium map (.html) file, the file produce base on the function in my script.

the problem in first page, i already tested it.
if i want the map change base on the dropdown menu selection, I should make the function that generated the map file, change the file name or not use the same name every time save the map (i made the name of file base the options that selected in dropdown menu)

it’s work…, but the problem is, because of the process like that , my new routinity is delete several map file to reduce the hadddrive capacity consumption.
if i change the script, only in part save name to save just with one name, the map not change…may be you can add an order to dash module that matching file on time stamp of file, not by name? just and idea.

so, meanwhile, i thinking to create script that produce only 3 name, which have additional order to delete the other two file every time the new file has produce.

the second, another strange behaviour is… the map that load by iFrame in the first page, change to regular picture… I cannot resize the zoom level and or cannot popup a notes when clicked.

mean while…, the second page is can… i mean, the map that load by iFrame, act like in jupyter, we can zoom it, or click the marker to see the notes that popup from it.

i make the dashboard in one file script, two page…, so basically it’s same between the first and the second page…but different act of the map…or different respon of the iFrame handle the map file (.html).

because of it, i’m asking in this section. did the iFrame have an options / configuration / style that we can use to set it on or off the behaviour like open folium in jupyter?

9

If anyone is still looking for a solution for this, you can return the map’s HTML content and pass it to srcDoc in the iframe to change the folium map in dash dynamically.

Function to plot Folium map and return srcDoc

def plot_map(df):
    #ommited code
    m = folium.Map(location=[0, 0], zoom_start=2, world_copy_jump=True, prefer_canvas=True)
    #ommited code
    src_doc = m.get_root().render()  #obtain the HTML content 
    return src_doc

In the layout of the Dash or DjangoDash app

html.Div(id='folium-map-container')

Callback to update the Folium map

@app.callback(
    Output('folium-map-container', 'children'),
    Input('dropdown-filter', 'value')
)
def make_folium_map(dropdown):
    mask = df['Variable'] == dropdown
    dff = df[mask].copy()
    return html.Iframe(srcDoc=plot_map(dff), style={'width': '800px', 'height': '500px'})

Alternatively, you can leave the iframe (e.g. with id=‘map-ifarme’) in the layout and change the output to (‘map-iframe’, ‘srcDoc’). In the callback, return map_plot(dff).
Both ways function the same but I’m using the first one as I don’t always need an iframe in my app

Layout

html.Iframe( id='map-ifarme, srcDoc=plot_map(dff), style={'width': '800px', 'height': '500px'})

Callback

@app.callback(
    Output('map-iframe', 'srcDoc'),
    Input('dropdown-filter', 'value')
)
def make_folium_map(dropdown):
    mask = df['Variable'] == dropdown
    dff = df[mask].copy()
    return plot_map(dff)
1 Like