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

Question

我正在创建一个带有传单地图的 RShiny 仪表板；我希望我的地图是全屏的，但我似乎无法让 borders/margins 消失。我已经尝试过之前 post 中提供的解决方案，但使用这些解决方案时，我只能得到一个完全空白的屏幕——地图似乎根本没有呈现。这是我的代码：

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)

如您所见，我当前的解决方法是根据视图 height/view 宽度 (width = "98vw", height = "90vh") 设置地图大小。如果我将其中任何一个设置为 100，地图的右边缘和下边缘就会离开屏幕。同样，我已经尝试了上面链接的 post 中提供的两种解决方案，但都不起作用。不幸的是，我对 HTML、CSS 或 JavaScript 不够熟悉，无法真正根据我的情况调整答案中的代码。

提前感谢您提出任何建议或解决方案！

编辑：下面是帮助@L D

的截图

Answer 1

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

它通过 CSS:

禁用了 Shiny 组件的 padding/margin

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)

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

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

Making a leaflet map fullscreen in an RShiny dashboard

html

css

r

shiny

leaflet