✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Folium maps and Dash

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?

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)

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?

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

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

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

Thanks. It works.




梁凡

邮箱:tasselmi@yeah.net

签名由 网易邮箱大师 定制

1 Like

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?