如何让 R 的传单使用 100% 的闪亮仪表板高度

Question

我正在创建一个闪亮的仪表板应用程序，其中仪表板 body 应该显示一些地图。到目前为止，让地图扩展到 body 的整个宽度没有问题，但它不知何故不愿意调整到全高。

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

代码如下：

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

尝试手动添加像素大小：

...
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "m_water",
        box(
          title = "Baltic catchment areas",
          collapsible = TRUE,
          width = "100%",
          height = "1000px",
          leafletOutput("l_watershed",width="100%",height="1000px")
        )
      ),
      tabItem(
        tabName = "m_pop",
        # Map in Dashboard
        leafletOutput("l_population",width="100%",height="1000px")
      ),
      tabItem(
        tabName = "charts",
        h2("Second tab content")
      )
    )
  )
...

Answer 2

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

100% 的 dashoboardBody 使 100vh（ccs3-unit）减去 header（最小 50px）减去 dashboardBody 填充（2 * 15px）。

因此，将高度设置为 100vh - 80px 应该没问题。

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

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)

玩得开心！

Answer 3

Th vh 单元不适用于某些旧的移动浏览器。下面的 css 应该适用于计算机和移动设备。

/* for computer */
div.outer {
     height: calc(100vh - 80px);
     padding: 0;
     margin: 0;
     min-height: 500px
}

@media all and (max-width:768px){
/* for mobile */
div.outer  {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0;
}
}

Answer 4

另一种选择是什么jcheng5 and kent37 have described on GitHub

output$mymap = renderLeaflet({...make a map...})
leafletOutput('mymap', height=1000)

对我有用 leaflet map R flexdashboard

Answer 5

如果您想将传单地图与另一种面板结构（如 navBarPage）结合使用，您也可以这样做，包括在 tabPanel 中的地图：

tags$style(type = "text/css", "html, body {width:100%;height:100%}"), tags$style(type = "text/css", "#map {height: calc(100vh - 80px) !important;}"), leafletOutput("map", width = "100%", height = "100%"),

Answer 6

基于@K 的回答。 Rohde 我一直在使用 custom css file 包含

#map {
    height: calc(100vh - 130px) !important;
}

@media only screen and (min-width: 768px) {
    #map {
    height: calc(100vh - 80px) !important;
    }
}

Answer 7

这是上面 K. Rohde 的答案的变体，其中包括相同的方法，但使用闪亮的模块。请注意在 tag$style 行中添加命名空间调用以获得相同的结果。

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


mod_leaflet_ui <- function(id){
  ns <- NS(id)
  fillPage(
  tags$style(type = "text/css", paste0("#",ns('map')), "{height: calc(100vh - 80px) !important;}"),
  leafletOutput(ns("map"))
  )
}

mod_leaflet_server <- function(id){
  moduleServer(
    id,
    function(input, output, session) {
      ns <- session$ns
      output$map <- renderLeaflet({
        leaflet() %>% addTiles() %>% setView(42, 16, 4)
        
    })
    
    }

  )
}

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    mod_leaflet_ui("leaflet_1")
    
  )
)

server <- function(input, output) {
 
  mod_leaflet_server("leaflet_1")
  
}

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

如何让 R 的传单使用 100% 的闪亮仪表板高度

How to get Leaflet for R use 100% of Shiny dashboard height

r

shiny

leaflet

shinydashboard