如何让 Leaflet for R 使用 100% 的闪亮仪表板高度 [英] How to get Leaflet for R use 100% of Shiny dashboard height

问题描述

我正在创建一个闪亮的仪表板应用程序，仪表板主体应该在其中显示一些地图.到目前为止，让地图在身体的整个宽度上展开没有问题，但它在某种程度上不愿意调整到整个高度.

I am in the process of creating a Shiny dashboard application, where the dashboard body is supposed to show some maps. So far no problem to get the map expand over the entire width of the body, but it's somehow not willing to adjust to the full height.

传单本身已设置为覆盖 100% 的高度，但它并没有起到作用.一旦我为 leafletOutput 使用 height 属性，leaflet 对象就根本不会显示，我只剩下一个空框.

The leaflet itself is already set to cover 100% of the height, but it doesn't do the trick. As soon as I use the height attribute for the leafletOutput the leaflet object will not show at all, and I am left with an empty box.

代码如下:

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)

推荐答案

我个人发现，设置相对于window-size的高度更令人满意.高度百分比不起作用，因为dashboardBody 的高度未定义.但是相对于整个文档来说还可以.

I personally found, that setting the height relative to window-size is more satisfying. Height as percentage does not work, because the dashboardBody has undefined height. But relative to the whole document is okay.

100% 的 dashoboardBody 使 100vh (ccs3-unit) 减去 header(最小 50px)减去 dashboardBody 填充(2* 15px).

100% of the dashoboardBody makes 100vh (ccs3-unit) minus header (minimum 50px) minus dashboardBody padding (2* 15px).

所以，将高度设置为 100vh - 80px 就可以了.

So, set the height to 100vh - 80px and you should be fine.

由于 shiny 不支持 css3-units，因此必须将其直接包含在文档中，如下面的代码所示.

Since shiny does not support css3-units, this has to be included directly to the document, like in the code below.

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)

玩得开心！

这篇关于如何让 Leaflet for R 使用 100% 的闪亮仪表板高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！