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

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)

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

10 Likes
1 Like

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:

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

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

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

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

has anyone got geemaps to work with streamlit?

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