fix plot in Folium in streamlit

Question

I'm trying to add both a map and a colored background simultaneously with the correct formatting, but I find an unexpected behaviour and not nice looking format.

Here is the code:

import streamlit as st
from streamlit_folium import st_folium
import folium

# setup page
st.set_page_config(page_title="streamlit test", layout="centered")

image_url = "https://img.freepik.com/foto-gratis/fondo-gris-pintado_53876-94041.jpg"

# CSS image
st.markdown(f"""
    <style>
        .stApp {{
            background-image: url("{image_url}");
            background-size: cover;
            background-position: center;
            background-color: transparent;
            font-family: 'Pacifico', cursive;
            color: #ffb6c1;
        }}
    </style>
""", unsafe_allow_html=True)

# Show Map
st_folium(
    folium.Map(
        location=[-20, 130], 
        zoom_start=5, 
        control_scale=True), 
    width=600, 
    height=400)

As a result you can see the format is not correct due to blank space, so I want the map using all avaliable margin figure:

First app run we can see the result with a long white background:

when rerunning the app we can see the result with a smaller white background :

try to change the layout=" width " in st.set_page_config and see if it works for you — user22693489
– user22693489, Commented Oct 28, 2024 at 8:31

artygo · Accepted Answer · 2024-11-04 08:56:42Z

1

+100

You can use use_container_width=True instead of setting the width. A lot of streamlit elements have that key word argument (e.g. st.pyplot).

st_folium(
    folium.Map(
        location=[-20, 130], 
        zoom_start=4, 
        control_scale=True), 
    use_container_width=True,
    height=400)

This will work as expected.

In wide mode:

In narrow mode:

Or you can set explicitly width to None (which is what is happening internally whenever you set use_container_width=True.

st_folium(
    folium.Map(
        location=[-20, 130], 
        zoom_start=4, 
        control_scale=True), 
    width=None,
    height=400)

(PS: By the way, the default width is 500...)

edited Nov 4, 2024 at 8:56

answered Nov 4, 2024 at 7:45

artygo

2812 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PeCaDe Over a year ago

It works, however in mobile view then it works differently as the problem persists. I guess this is something streamlit is not managing well.

Collectives™ on Stack Overflow

fix plot in Folium in streamlit

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related