pythonleafletstreamlitfolium

Fully hide margins on maps added to streamlit

I want my leafmap map to occupy ALL the backgroud or main, without any margin or something to move it up, down, left or right. However, I still have margins at the top and bottom. Also, if I increase the height this creates a Y offset and I don't want that either but a static window fitted to the main or background space. I attach a screenshot of what I mean. On the other hand, I need to add layers from a netcdf, so it's better folium or leafmap? Please help me. Thanks in advance.

import streamlit as st
import leafmap.foliumap as leafmap 

st.set_page_config(
    page_title=None,
    page_icon=None,
    layout="wide",
    initial_sidebar_state="auto",
)
st.markdown(
    """
    <style>
        header {visibility: hidden;}
        footer {visibility: hidden;}
        .block-container {
            padding: 0 !important;
            margin: 0 !important;
            max-width: 100% !important;
            width: 100% !important;
        }
        .main {
            padding: 0 !important;
            margin: 0 !important;
        }
        .css-1aumxhk {
            margin-top: 0 !important;
        }
    </style>
    """,
    unsafe_allow_html=True,
)

m = leafmap.Map(center=[-0.1807, -78.4678], zoom=7)
m.to_streamlit(height=830)

Margins

Solution

  • Top margin is created by st.markdown() :)

    If I use st.html() (without unsafe_allow_html=True,) instead of st.markdown() then top margin disappears.

    (It seems st.html() was added in version 1.33.0 in Apr 2024 - so it may not be used in older tutorials)

    As for bottom margin - it needs height: 100vh (as suggested @CamillaGiuliani) but inside <style> and for iframe.

    It also needs to change iframe into block-object because there is still small gap in iframe like for inline-text.

    <style>
   iframe {
      height: 100vh;
      display: block;
   }
</style>

    Full working code:

    Streamlit version: 1.44.1

    import streamlit as st
import leafmap.foliumap as leafmap 

print('Streamlit version:', st.__version__)

st.set_page_config(
    page_title=None,
    page_icon=None,
    layout="wide",
    initial_sidebar_state="auto",
)

st.html(
    """
    <style>
        header {visibility: hidden;}
        footer {visibility: hidden;}
        .block-container {
            padding: 0 !important;
            margin: 0 !important;
            max-width: 100% !important;
            width: 100% !important;
        }
        .main {
            padding: 0 !important;
            margin: 0 !important;
        }
        .css-1aumxhk {
            margin-top: 0 !important;
        }

        iframe {
            height: 100vh;
            display: block;
        }
    </style>
    """
)

m = leafmap.Map(center=[-0.1807, -78.4678], zoom=7)
m.to_streamlit() # height=830)