在 R Shiny 仪表板中全屏制作传单地图

Question

我正在努力创建一个带有传单地图的 RShiny 仪表板；我希望我的地图是全屏的，但我似乎无法完全消除边框/边距。我已经尝试过上一篇文章中提供的解决方案（https://stackoverflow.com/questions/61341817/making-leaflet-map-fullscreen-in-rshiny），但是使用这些解决方案我只是得到一个完全空白的屏幕- - 地图似乎根本没有渲染。这是我的代码：

library(leaflet)
library(shiny)
library(tidyverse)

# UI
ui <- navbarPage("Dashboard",
                 tabPanel("Fullscreen Map",
                          fillPage(
                                 leafletOutput("map", width = "98vw", height = "90vh"))
                          )
)

# FUNCTION
server <- function(input, output, session) {
  output$map <- renderLeaflet({
                            leaflet() %>% 
                            addTiles() %>% 
                            setView(lat = 0, lng = 0, zoom = 5)
    })
}

# RUN APP
shinyApp(ui = ui, server = server)

如您所见，我当前的解决方法是根据视图高度/视图宽度设置地图大小（

width = "98vw", height = "90vh"

）。如果我将其中任何一个设置为 100，地图的右边缘和下边缘就会离开屏幕。再次，我尝试了上面链接的帖子中提供的两种解决方案，但都不起作用。不幸的是，我对 HTML、CSS 或 JavaScript 不够熟悉，无法真正根据我的情况调整答案中的代码。

编辑：下面是帮助@L D的屏幕截图

Answer 1

如果重点是最大化页面上的地图，向上到导航栏、向左、向右、向下到底部，请尝试以下操作，但对您来说可能太快和肮脏。

它通过 CSS 禁用闪亮组件的填充/边距：

library(leaflet)
library(shiny)

# UI
ui <- navbarPage("Dashboard",
                 tabPanel("Fullscreen Map",
                          fillPage(
                            leafletOutput("map", width = "100vw", height = "100vh"))
                 ),
                 header=tags$style(HTML("
                                        .container-fluid{
                                          padding: 0px !important;
                                        }
                                        .navbar{
                                          margin-bottom: 0px !important;
                                        }"))
)

# FUNCTION
server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%
      setView(lat = 0, lng = 0, zoom = 5)
  })
}

# RUN APP
shinyApp(ui = ui, server = server)

编辑：JavaScript 版本

library(leaflet)
library(shiny)


# UI
resizeJS <- "
  function resizeMap(e){
        $('#map').css({top: $('.navbar').height() });
  }

  $(window).on('resize', resizeMap);
  $(window).ready(resizeMap);
"

ui <- navbarPage("Dashboard",
                 tabPanel("Fullscreen Map",
                          fillPage(
                            leafletOutput("map", width = "auto", height = "auto"))
                 ),
                 header=tags$head( tags$style(HTML("
                                        #map{
                                          border: 3px solid red; /* display border around the map */
                                          position: fixed;
                                          left: 0px;
                                          right: 0px;
                                          bottom: 0px;
                                          top: 0px;
                                        }
                                        .navbar{
                                          margin-bottom: 0px !important;
                                        }")),
                                   tags$script(resizeJS))
)

# FUNCTION
server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%
      setView(lat = 0, lng = 0, zoom = 5)
  })
}

# RUN APP
shinyApp(ui = ui, server = server)

这应该使地图与窗口完美对齐。