r - 如何让Leaflet for R使用100%的Shiny仪表板高度

Question

我正在创建一个 Shiny 的仪表板应用程序，仪表板主体应该显示一些 map 。到目前为止，让 map 扩展到整个 body 宽度没有问题，但不知何故不愿意调整到整个高度。

传单本身已设置为覆盖 100% 的高度，但它并没有达到目的。一旦我使用 leafletOutput 的 height 属性，leaflet 对象将根本不会显示，并且留下一个空框。

代码如下:

library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sidebarMenu(
      menuItem(
        "Maps", 
        tabName = "maps", 
        icon = icon("globe"),
        menuSubItem("Watersheds", tabName = "m_water", icon = icon("map")),
        menuSubItem("Population", tabName = "m_pop", icon = icon("map"))
      ),
      menuItem(
        "Charts", 
        tabName = "charts", 
        icon = icon("bar-chart"),
        menuSubItem("Watersheds", tabName = "c_water", icon = icon("area-chart")),
        menuSubItem("Population", tabName = "c_pop", icon = icon("area-chart"))
      )
    )
  ),
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "m_water",
        box(
          title = "Baltic catchment areas",
          collapsible = TRUE,
          width = "100%",
          height = "100%",
          leafletOutput("l_watershed")
        )
      ),
      tabItem(
        tabName = "m_pop",
        # Map in Dashboard
        leafletOutput("l_population")
      ),
      tabItem(
        tabName = "charts",
        h2("Second tab content")
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$l_watershed <- renderLeaflet({
    leaflet(height = "100%") %>% addTiles() %>% setView(19.08, 60.25, zoom = 4) %>%addWMSTiles(
      "http://62.236.121.188/arcgis/services/DataAndMaps/Background/MapServer/WMSServer?",
      layers = "11",
      options = WMSTileOptions(
        format = "image/png",
        transparent = TRUE
      ),
      attribution = "Catchment area provided by HELCOM"
    )
  })

  output$l_population <- renderLeaflet({
    leaflet(height = "100%") %>% addTiles() %>% setView(19.08, 60.25, zoom = 4) %>%addWMSTiles(
      "http://62.236.121.188/arcgis/services/DataAndMaps/Background/MapServer/WMSServer?",
      layers = "17",
      options = WMSTileOptions(
        format = "image/png",
        transparent = TRUE
      ),
      attribution = "Population data provided by HELCOM"
    )
  })
}

shinyApp(ui, server)

Answer 1

我个人发现，设置相对于window-size的高度更令人满意。百分比高度不起作用，因为仪表板主体的高度未定义。但相对于整个文档来说还好。

100% 的 dashoboardBody 等于 100vh (ccs3-unit) 减去标题(最小 50px)减去仪表板主体填充(2* 15px)。

因此，将高度设置为 100vh - 80px 就可以了。

由于shiny不支持css3单元，因此必须将其直接包含到文档中，如下面的代码所示。

library(shiny)
library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(type = "text/css", "#map {height: calc(100vh - 80px) !important;}"),
    leafletOutput("map")
  )
)

server <- function(input, output) {
  output$map <- renderLeaflet({
    leaflet() %>% addTiles() %>% setView(42, 16, 4)
  })
}

runApp(shinyApp(ui, server), launch.browser = TRUE)

玩得开心!