How can I add Folium map to the form?

Anvil Q&A
1

Hello,
I’m trying to add a Folium map to my Anvil app but I’m not really sure how to go about it. The map is generated through Python in a Jupyter Notebook and I want to display it inside the form.

It’s supposed to be a live map that should be updated every few seconds so I can’t just use static HTML code (although Folium does convert the map to HTML if that’s useful). I hope someone can help.

Thanks in advance.

2

Hi @reda.gossony and welcome to the forum,

Here’s a clone link that demonstrates how you might achieve this.
https://anvil.works/build#clone:L7Q6H3KMW4EKDUSO=4T2ZU2OSTOV3J4SWW5T6GW67

You won’t be able to run it without the paid version - but you should be able to move the server function to your uplink code.

The approach was taken from the docs under the section on using folium with flask:
https://python-visualization.github.io/folium/flask.html

The implementation in the docs was awfully slow to load, because the html returned tried to inject bootstrap, jquery and fontawesome into the anvil app.
But anvil already ships with those libraries so I did some hacking to remove those injected libraries.

You’ll see in the ServerModule how I did that.

3 Likes
3

Hello,
This approach works perfectly. Thanks a lot !