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

[AndreasNehls]

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.

[randyzwitch]

Hi @AndreasNehls, welcome to the Streamlit community!

As streamlit-folium is an external Component (that just happens to be written by me ), 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

[AndreasNehls]

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

[cadasa]

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

[randyzwitch]

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.

[cadasa]

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

[randyzwitch]

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.

[cadasa]

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

[randyzwitch]

@cadasa

initial page-zoom level smaller than 100%

I don’t know what you mean.

@cadasa

Can you also make kepler_static to read the HTML representation from the Kepler.gl map object

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

[cadasa]

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:

[randyzwitch]

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

[cadasa]

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

[snm]

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

[Danny_Ramsey_Lasso_C]

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.

[AAzzam]

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;

When screen is smaller size:

[Andersons_code]

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.")

[Andersons_code]

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)