Início / coding / Perguntas / 79592885
Accepted
Miguel Angel Gonzalez Cueva
Asked: 2025-04-25 23:47:51 +0800 CST

Ocultar completamente as margens nos mapas adicionados ao streamlit

  • 772

Quero que meu mapa leafmap ocupe TODO o plano de fundo ou o plano principal, sem nenhuma margem ou algo que o mova para cima, para baixo, para a esquerda ou para a direita. No entanto, ainda tenho margens nas partes superior e inferior. Além disso, se eu aumentar a altura, isso cria um deslocamento em Y , e eu também não quero isso, mas uma janela estática ajustada ao espaço principal ou de fundo. Anexei uma captura de tela do que quero dizer. Por outro lado, preciso adicionar camadas de um netcdf, então é melhor usar o folium ou o leafmap? Por favor, me ajudem. Agradeço antecipadamente.

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)

Margens

python

2 respostas

  1. Best Answer

    A margem superior é criada por st.markdown():)

    Se eu usar st.html()(sem unsafe_allow_html=True,) em vez de st.markdown()então a margem superior desaparece.

    (Parece que st.html() foi adicionado na versão 1.33.0 em abril de 2024 - então pode não ser usado em tutoriais mais antigos)

    Quanto à margem inferior - ela precisa height: 100vh(como sugerido @CamillaGiuliani), mas dentro <style>e para iframe.

    Ele também precisa mudar iframepara block-object porque ainda há uma pequena lacuna em iframe-text inline.

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

    Código de trabalho completo:

    Versão do Streamlit: 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)
    • 1

  2. Acho que você pode ajustar seu CSS e as configurações do mapa para preencher o espaço disponível corretamente desta maneira:

    • A .mainclasse foi ajustada height: 100vhpara garantir que o mapa ocupe toda a altura da janela de visualização.

    • Configurando a altura do mapa dinamicamente 100vhusando m.to_streamlit(height="100vh").

    O código:

    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;
            height: 100vh; 
        }
        .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="100vh")

    Isso garantiria que o mapa e o contêiner não tivessem margens ou preenchimento e ocupassem todo o espaço disponível. E também li que o Leafmap é mais adequado que o Folium para trabalhar com dados geoespaciais, incluindo formatos como netCDF.

    • 0

relate perguntas