Streamlit-folium with the new layout option (StreamlitAPIException - Error)

Custom Components streamlit-folium
1

If I run streamlit-folium with the new layout option:

import streamlit as st
from streamlit_folium import folium_static
import folium

st.set_page_config(layout = 'wide')

c1, c2, c3 = st.beta_columns((1, 3, 1))

c1.title('Column 1')
c2.title('Column 2')
c3.title('Column 3')

m = folium.Map(location = [39.949610, -75.150282], zoom_start = 16)

tooltip = 'Liberty Bell'
folium.Marker(
    [39.949610, -75.150282], popup = 'Liberty Bell', tooltip = tooltip
).add_to(m)

c2.folium_static(m)

I get this error:

StreamlitAPIException: folium_static() is not a valid Streamlit command.

Traceback:
File "app.py", line 25, in <module>`
    c2.folium_static(m)

streamlit - Version: 0.72.0
streamlit-folium - Version: 0.1.0
folium - Version: 0.11.0

Maybe someone can help? Thank you very much.

2

Hi @AndreasNehls, welcome to the Streamlit community!

As streamlit-folium is an external Component (that just happens to be written by me :laughing:), itā€™s not part of the methods defined in Streamlit for the column/layout API. Instead, try the following as your last line:


with c2:
    folium_static(m)

Best,
Randy

1 Like
3

@randyzwitch thanks for your fast answer - now it works very well, with the layout option :+1:

1 Like
4

I did it using with column:
folium_static(m)
and it works fine but it is currently not possible to set the option ā€œuse_container_width = Trueā€. Can you make it happen?

I can set the width and height in folium but the map doesnā€™t resize if I zoom in or zoom out my dashboard

5

Not sure thatā€™s possible. The way folium_static sets the size is by reading from the Folium object on the Python side, or whatever the developer specifies from Python. Itā€™s not clear to me how Iā€™d be able to get the size from the JavaScript side (i.e. the browser), but know about it from the Python side.

If someone could figure it out though, I am happy to accept a PR, as it does sound like desirable functionality.

6

How did you do for other maps and charts such as: st.pydeck_chart, st.map or st.altair_chart etc ? they are all equipped with use_container_width option

7

Because all of those functions are part of the Streamlit python package. Folium and streamlit-folium donā€™t share any of the same Python classes, folium_static literally just reads the HTML representation from the Folium object and displays it.

8

Thanks! Do you know if itā€™s possible to set initial page-zoom level smaller than 100% (currently if I deploy the app) - donā€™t see it in the st.set_page_config

Btw, Can you also make kepler_static to read the HTML representation from the Kepler.gl map object (It has been written as Notebook widget in Jupyter: https://github.com/keplergl/kepler.gl/blob/master/docs/keplergl-jupyter/README.md

9

I donā€™t know what you mean.

It wouldnā€™t be too hard to do, but Iā€™m not sure when Iā€™d get to doing that.

10

what I meant was because I canā€™t control the width of folium_static when I first deploy my app and open - it will be display with 100% and the two columns are overlaid like this:

image
image838Ɨ311 25 KB

11

You canā€™t set the width in percentage terms, but you can use width= to set the total width of the displayed map

12

Yes, I know and I have set the width fits for 75% zoom of the browser.

image
image1063Ɨ328 31.7 KB

14

Hi, Is there any update on this issue. I am facing this issue even now.

15

Iā€™m encountering the same issue ā€“ is there a way to prevent the Folium map from overlaying on the Streamlit app? The map size doesnā€™t change when zooming in on the web, which is causing the app to become unresponsive. Iā€™m keen to know if anyone has found a solution or an alternative.

16

Hi, Is there any update on this? I am encountering the same issue aswell.
I have tried several options but it did not worked out. What I want is that the folium map adjust dynamically on page/container width.

When screen is normal size;

normal_size_screen
normal_size_screen1184Ɨ404 174 KB

When screen is smaller size:

smaller_size_screen
smaller_size_screen869Ɨ420 155 KB

17

this is a good aproach to solve it:


import streamlit as st
import streamlit.components.v1 as components
import folium

def all_data():
    # Create the map
    m = folium.Map(location=[0, 0], zoom_start=2)
    
    # Convert map to HTML string
    map_html = m._repr_html_()
    
    # Custom HTML with responsive iframe
    html = f"""
    <style>
        .responsive-map {{
            position: relative;
            padding-bottom: 75%; /* 4:3 Aspect Ratio */
            height: 0;
            overflow: hidden;
        }}
        .responsive-map iframe {{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }}
    </style>
    <div class="responsive-map">
        {map_html}
    </div>
    """
    
    # Render the HTML
    components.html(html, height=600)

    st.write("This map will resize based on the screen size.")
1 Like
18

IĀ“m not sure when they update this but now you can use
width and with height percentage.
st_folium(m1, width=ā€˜100%ā€™, height=200)