Hosting data for a folium map for a website

Question

I've created an interactive map on python with folium. I have intention to deploy it on a website.

On the website I'm planning to have input fields to allow users to filter this data to be displayed on the map.

Question: how do I host the data for the map to query?

Answer 1

I think the reason why this question got a lot of downvotes is because you added javascript, html tags which are technically related to the topic but not so much practically:)

In Folium you could use folium.Map.save('mymap.html') to save your folium map as mymap.html file.

That will generate a very large and unreadable html file with a lot of embedded javascript codes. Easiest way to include it to your main html file (let's say it's called index.html) is using iframe tag to import mymap.html to the main index.html

Since it generates a really large unreadable html, it's near impossible to connect it to your input tag in your main index.html. You need to include input field in python script before you convert it to mymap.html

I found a perfect Medium article for this problem which is here: https://medium.com/generating-folium-maps-based-on-user-input-for-a/generating-folium-maps-based-on-user-input-for-a-dash-layout-16363da6ecd3

In short in the article, they used dash framework ( https://dash.plotly.com/ ) to make a dropdown user input fields, and then in the function that creates folium map, they put decorator called app.callback with a bunch of dash.dependencies.Input and dash.dependencies.Output as parameter of @app.callback to connect the user input to the map.