Folium map: white space under the map on the first rendering

[Gritank]

Hello everyone,

I’m currently facing an issue with my app that uses st_folium. During the initial rendering of the page, there is a large white space appearing below the map, which disappears when I refresh the page.

To help diagnose the problem, here’s the requested information:

Running Environment: Local but same when deployed.
Versions:

• Streamlit: 1.39.0
• Streamlit-folium: 0.22.1
• Python: 3.11.3

Any insights or suggestions on how to resolve this issue would be greatly appreciated!

Thank you!

Below is the simple test code.

import streamlit as st
import folium
from streamlit_folium import st_folium

st.title("Test Streamlit-folium")

# Init map
m = folium.Map(location=[50.8182, 4.2275], zoom_start=6)


st_data = st_folium(m)

[Dge]

Hi,
I use this CSS workaround:

/*  Pour éviter les blancs en-dessous des cartes */
iframe[title="streamlit_folium.st_folium"] { height: 500px;}

I don’t know if this is the best solution but it works !
And I load the CSS’s file like this:

with open('static/style.css') as f:
    st.write(f"<style>{f.read()}</style>", unsafe_allow_html=True)

[eduardob]

you can use folium_static and pass width and height to get rid of the whitespace.

here’s a demo

import streamlit as st
import folium
from streamlit_folium import folium_static

st.title("Test Streamlit-folium")
m = folium.Map(location=[50.8182, 4.2275], zoom_start=6)
st_data = folium_static(m, width=300, height=300)
st.markdown("checking if there is whitespace")

Result:

[Gritank]

Hi,
Thank you for the helpful tips! It is working now, even though I would have preferred it to work without this “little” patch.

But at least it’s usable now.

[Gritank]

Hi,

Thank you for your help! It would have worked, but I forgot to mention that I’m using markers and need the feedback from the map : “st_data”. Therefore, it’s not feasible for me to use folium_static in this case.