ANN: streamlit-folium, a Component for rendering Folium maps

Custom Components streamlit-folium
1

Folium has been the subject of numerous threads and feature requests, so I decided to kickoff the beginning of Folium support within Streamlit!

Installation is as straightforward as:

pip install streamlit-folium

Example

import streamlit as st
from streamlit_folium import folium_static
import folium

"# streamlit-folium"

with st.echo():
    import streamlit as st
    from streamlit_folium import folium_static
    import folium

    # center on Liberty Bell
    m = folium.Map(location=[39.949610, -75.150282], zoom_start=16)

    # add marker for Liberty Bell
    tooltip = "Liberty Bell"
    folium.Marker(
        [39.949610, -75.150282], popup="Liberty Bell", tooltip=tooltip
    ).add_to(m)

    # call to render Folium map in Streamlit
    folium_static(m)

image
image1543×1527 409 KB

How it works

This Component uses components.html to take the HTML generated from a folium.Map or folium.Figure object render() method, and display it as-is within Streamlit.

Limitations and Future Development

As I’ve mentioned in other Folium threads, I hadn’t even heard of Folium until people started requesting it! So I’m barely on the scale of a new Folium user. Testing was done by going through the Folium quickstart and copy-pasting results to see if they work. They do appear to work, providing a similar experience to Jupyter Notebook rendering.

That said, not being an intense Folium user, I welcome users to try this component and file issues when you come across them. Currently, the Component is static, which means that it just renders the Python object as it exists, there are no callbacks from interacting with the Folium object via JavaScript.

I welcome Folium enthusiasts to contribute to this package to make it what YOU want to see.

Best,
Randy

13 Likes
2
1 Like
4

wow :astonished:good work! This combined with agraph-component would be awesome.

Example use-case:

The Internet backbone may be defined by the principal data routes between large, strategically interconnected computer networks and core routers of the Internet.

Enbling people to show locations combined with networks á la:

1040×541 183 KB

5

I’ve got an open issue for a more impressive example, if you want to contribute that

6

Is there any way to add google maps imagery as a layer, or would that be a completely new component?

7

I believe that’s just a plain Folium question…if it’s possible with Folium, it should be possible in the streamlit-folium plugin, as all I’m doing at the moment is using the HTML from one of the Folium display methods

1 Like
8

Fantastic, what I want to create is an app where location (lat/lon) tagged images can be browsed on a google map interface, and when you click on a pin you get a view of the image. Will keep you posted of any progress.

https://towardsdatascience.com/creating-interactive-maps-for-instagram-with-python-and-folium-68bc4691d075

1 Like
9

has anyone got geemaps to work with streamlit?

10

Thanks for the package, actually with this kind of package I can create an application for showing about how dense the population of my city, Surabaya with Streamlit and Folium, for more information you can check out my article Recreating My Project Using Folium and Streamlit Part 2 | by Muhammad Sifa’ul Rizky | Data Driven Investor | Medium and with this, I can show to the audience in my country about Streamlit itself, feel free to check it out the video here “Make your Data Application using The Easiest Framework, Streamlit” by Faul – PyCon Indonesia 2020 - YouTube . Any feedback is welcome, thanks!

1 Like
11

Is it possible to change the size of the map using folium_static. Thanks

12

Yes, folium_static takes two keyword arguments for width and height.

13

Hi Randy - thanks for your reply.
width and height are restricted to 500 I suppose. What I want is to extend the map to width of the page same as we could do with other widgets. It seems that we are restricted to small view for folium here. Could you point me to any example if it is achievable

2 Likes
14

Thanks so much for this component. I was struggeling with deckgl quite a bit and find streamlit-folium much more straigt-forward to use. Is there a way to set the size of the markers?

15

Hi,

I have been doing some work of creating a folium choropleth map in python and trying to embed that within streamlit. Whilst I have been successful in getting the map displayed within streamlit via:

folium_static(my_map, width=1200, height=700),

for some reasons the legend of the map is not getting displayed in the map. But if I save the map as a stand alone html file and then open it in a separate webpage ( just the map that I saved as html), the legend is displayed there. The python command I used to save it as an html file was :

my_map.save(‘sample_map.html’).

Can you please help me in getting this matter resolved and show my full map(including it’s legend) to be displayed within streamlit.

NB: I also attempted to do as follows, but no joy in doing that either:

st.markdown(my_map.repr_html_(), unsafe_allow_html=True), as I was getting a " ‘Map’ object has no attribute ‘repr_html_’ " error message.

Many thanks,
Abraham

16

Can you post the code you are using to generate the map? In general, if you are using folium_static, it’s reading the HTML from the Folium object, so it feels like it should work as-is.

17

Will you add a button to display the map in full screen after clicking it?

18

Is that a Folium plugin that you’re already adding to the map specification or just a general request?

19

Do you have any advice to keep the map (choropleth) from consistently re-rendering any time the map is panned, zoomed, or otherwise changed by the user? I’ve tried @st.cache in several ways but cannot get it to work effectively without throwing error messages.

20

Dear randyzwitch,

The legend of the map is not displayed in my project either. For some reason in this step of folium_static() from your git:streamlit-folium/__init__.py at master · randyzwitch/streamlit-folium · GitHub

(line 57) fig = folium.Figure().add_child(fig)

The legend element disappears. Is there any solution?

Thanks,
Marcel

21

Hey,

As I’ve been using Folium to plot some maps and trying to display them in streamlit I used Folium_static(), but I’ve got a problem as the maps cannot be modified after calling Folium_static().

Is there any other approach or solution for this problem?!

Thank you,