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

Posted 2023-03-24

【中文标题】如何让 Leaflet for R 使用 100% 的闪亮仪表板高度

【英文标题】：How to get Leaflet for R use 100% of Shiny dashboard height

【发布时间】：2016-07-27 22:45:26

【问题描述】：

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

传单本身已设置为覆盖 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)

【参考方案1】：

我个人发现，设置相对于窗口大小的高度更令人满意。高度百分比不起作用，因为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)

玩得开心！

【讨论】：

非常爱你！我折磨了自己一个月才找到方法

哇，我已经尝试了这么多不同的解决方案，并且在这个问题上花费了至少 15-20 个小时。这是它为我工作的第一种（唯一？）方式。谢谢！！

也可以直接在输出中使用视口高度(vh)：leafletOutput("map", height = "95vh")

【参考方案2】：

另一个选项是 jcheng5 和 kent37 在 GitHub 上描述的内容

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

在R flexdashboard 中使用leaflet map 为我工作

【参考方案3】：

尝试手动添加像素大小：

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

【讨论】：

或者在Box你可以使用tags$style(type = "text/css", ".box-body height:80vh"),然后leafletOutput("l_watershed",width="100%",height="100%")

添加像素大小有效...但是，高度取决于用户的屏幕，不能设置为固定值。因此，需要百分比。有没有可能做到这一点？

tags$style(type = "text/css", ".box-body height:80vh") 的使用有助于解决问题！谢谢

@ThomasBecker 80vh 它不是完全正确的——它只是屏幕的 80%.. 所以可能是@K。罗德版会更好

是的，@K 的版本。罗德是更精确的方法。但是，您的两个回复都回答了问题并解决了问题。

【参考方案4】：

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;

【参考方案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%"),

【参考方案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;