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

问题描述

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

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属性时，传单对象将根本不会显示，而我留下一个空框.

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)

我个人发现

推荐答案

相对于窗口大小设置高度更加令人满意.高度百分比不起作用，因为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单元)减去标头(最小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-unit，因此必须将其直接包含在文档中，如下面的代码所示.

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屋！