Making Leaflet Map fullscreen in RShiny

Question

I'm having trouble making my leaflet map in Shiny go fullscreen. While I can obviously just manually set the width and height of the map to my screen-size, I'd like to the map to adapt to whatever screen-size it is shown on.

How do I go about automating the size of the map?

Here's the code I've been trying so far. Unfortunately, however, this doesn't adjust the height properly.

library(shiny)
library(leaflet)

location=c(46.52433,10.12633)

ui <- fluidPage(
  tags$head(tags$style(HTML("#map {height:100%, width:100%;}"))),

  leafletOutput("map")


)

server <- function(input, output, session) {

  output$map = renderLeaflet({
    leaflet() %>% addTiles()  %>% setView(lat = location[1],lng = location[2],zoom = 10) %>% 
      addMarkers(lat = location[1],lng = location[2],popup = "Test") })


}


shinyApp(ui, server)

Any help would be greatly appreciated, thanks!

Answer 1

Try adding width = "100%", height = "100%" to leafletOutput and using fillPage() like below:

library(shiny)
library(leaflet)

location=c(46.52433,10.12633)

ui <- fillPage(
  tags$style(type = "text/css", "html, body {width:100%; height:100%}"),
  leafletOutput("map", width = "100%", height = "100%")

  )

server <- function(input, output, session) {

  output$map = renderLeaflet({
    leaflet() %>% addTiles()  %>% setView(lat = location[1],lng = 
location[2],zoom = 10) %>% 
      addMarkers(lat = location[1], lng = location[2],popup = "Test") })


}


shinyApp(ui, server)

Answer 2

With JavaScript:

js <- '
$(document).on("shiny:connected", function(){
  $("#map").css({
    width: window.innerWidth, 
    height: window.innerHeight
  });
  $(window).on("resize", function(e){
    if(e.target instanceof Window){
      $("#map").css({width: window.innerWidth, height: window.innerHeight});
    }
  });
})
'
location=c(46.52433,10.12633)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("html,body {margin: 0; overflow: hidden;}")),
    tags$script(HTML(js))
  ),
  ......

Answer 3

If you want a simple and uncomplicated solution then try view height and it shall do the thing

if(interactive()) {
  library(shiny)
  library(leaflet)
  
  location = c(46.52433, 10.12633)
  
  ui <- fluidPage(leafletOutput("map", height = "100vh"))
  
  server <- function(input, output, session) {
    
    output$map = renderLeaflet({
      leaflet() %>% addTiles() %>%
        setView(lat = location[1],
                lng = location[2],
                zoom = 10) %>%
        addMarkers(lat = location[1],
                   lng = location[2],
                   popup = "Test")
    })
  }
  
  shinyApp(ui, server)
}

This solution will work fine if you want to put it within an element also.

Keep Coding!