Folium 地图拒绝填充其容器的高度

Question

我正在尝试使用下面的代码在

folium

应用程序的卡片中显示

shiny for Python

地图（可重现的示例）：

from shiny import App, ui, render, reactive
import folium

app_ui = ui.page_fluid(
    ui.tags.style(
        """
        /* apply css to control height of some UI widgets */
        .map-container {
            height: 700px !important;
            width: 100%;
            overflow: hidden;
        }
        .map-container > * {
            height: 100% !important;
        }
        """
    ),
    ui.column(6,
        ui.navset_card_tab(
            ui.nav_panel("Map",
                ui.div(
                    ui.output_ui("map"),
                    class_="map-container"
                )
            ),
            ui.nav_panel("Data",
                ui.p(
                    ui.output_table("data_table")
                )
            )
        )
    )
)

def server(input, output, session):
    @output
    @render.ui
    def map():
        m = folium.Map(location=[51.509865, -0.118092], zoom_start=12)
        return ui.HTML(m._repr_html_())

    @output
    @render.table
    def data_table():
        # Your data table rendering logic here
        pass

app = App(app_ui, server)

我希望包含地图的元素填充屏幕的高度，但地图本身拒绝填充卡片的整个高度。它只占据卡片区域的上半部分。

在

Shiny for R

中，我使用

as_fill_carrier()

库中的

bslib

函数获得了相同的结果，如下所示：

  card(
    style = "height: 80vh;",
    full_screen = TRUE,
    #card_header("Map"),
    card_body(
      tmapOutput("map") %>%
        withSpinner(type = 6, color = "#30804e") %>% as_fill_carrier() 
      )
    )
  )

我能做什么？

Answer 1

这是

folium

的问题，其中

m._repr_html_()

导致地图嵌入到默认情况下具有

div

的

padding-bottom: 60%;

中。如果您想使用整个空间，则必须覆盖它。下面是一个示例，只需将

css

替换为更合适的即可完成此操作，特别是，我删除

padding-bottom: 60%;

并应用

height: 100%;

，从而产生所需的填充布局。

from shiny import App, ui, render
import folium

app_ui = ui.page_fluid(
    ui.tags.style(
        """
        /* apply css to control height of some UI widgets */
        .map-container {
            height: 700px !important;
            width: 100%;
            overflow: hidden;
        }
        .map-container > * {
            height: 100% !important;
        }
        """
    ),
    ui.column(6,
        ui.navset_card_tab(
            ui.nav_panel("Map",
                ui.div(
                    ui.output_ui("map"),
                    class_="map-container"
                )
            ),
            ui.nav_panel("Data",
                ui.p(
                    ui.output_table("data_table")
                )
            )
        )
    )
)

def server(input, output, session):
    @output
    @render.ui
    def map():
        m = folium.Map(location=[51.509865, -0.118092], zoom_start=12)
        m = m._repr_html_()
        m = m.replace(
            '<div style="width:100%;"><div style="position:relative;width:100%;height:0;padding-bottom:60%;">', 
            '<div style="width:100%; height:100%;"><div style="position:relative;width:100%;height:100%;>', 
            1)
        return ui.HTML(m)

    @output
    @render.table
    def data_table():
        # Your data table rendering logic here
        pass

app = App(app_ui, server)