How to make leaflet map and absolutePanel of inputs / outputs full screen in shiny

Question

I want to click a button to make a leaflet map and all overlayed inputs full screen.

Using the following example, I can make the map full screen but I lose the inputs (in this case, h1("test")). Or I can preserve the inputs on top of the map but then the map is not drawn full screen as expected.


library(leaflet)
library(shiny)

js <- "
function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}"



ui <- fluidPage(
  tags$scrip(HTML(js)),
  actionButton("fullscreen", "Full Screen Container",
               onclick = "openFullscreen(document.getElementById('map_container'))"),
  actionButton("fullscreen", "Full Screen Map Only",
               onclick = "openFullscreen(document.getElementById('map'))"),
  div(
    id = "map_container",
    leafletOutput(height = "100px", "map"),
    absolutePanel(
      top = 20,
      right = 20,
      h1("test", style = "color:white")
    )
  )
)

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

  output$map <- renderLeaflet({
    leaflet() %>% 
      addProviderTiles('Esri.WorldImagery') %>% 
      setView(lng = 118.2437, lat = 34.0522, zoom = 5)
  })
}

shinyApp(ui, server)

Update

I tried adding z-index: 10000 !important; to the h1() style based on this, but it is still hidden when maximizing the leaflet map.

See this https://stackoverflow.com/questions/70991329/leaflet-fullscreen-toggle-button-in-r-shiny/70994128#70994128 — lz100, Apr 22 '22 at 19:44
Looking at the gif provided in the answer, it doesn’t look like the inputs are overlayed on top of the map in full screen. That is the issue. I can already make the leaflet map itself full screen. That is demonstrated by the reprex I included in my question. I want to make the map and inputs on top of the map full screen. — Giovanni Colitti, Apr 22 '22 at 19:49

lz100 · Accepted Answer · 2022-04-22T22:56:27.473

library(leaflet)
library(shiny)

js <- "
function openFullscreen(elem) {
  var map = $(elem).find('.leaflet.html-widget');
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
  $(map).css('height', '100vh').trigger('resize');
}

document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false);
document.addEventListener('webkitfullscreenchange', exitHandler, false);

function exitHandler(){
  if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement) return;
  $('#map').css('height', '400px').trigger('resize');
}
 
"



ui <- fluidPage(
    actionButton(
        "fullscreen", "Full Screen Container",
         onclick = "openFullscreen(document.getElementById('map_container'))"
    ),
    div(
        id = "map_container",
        leafletOutput(height = "400px", "map"),
        absolutePanel(
            top = 20,
            right = 20,
            style = "color: #FFF",
            h1("test", style = "color:white"),
            selectInput("in2", "choose", 1:5),
            numericInput("in3", "number", 0, 0, 10)
        )
    ),
    tags$scrip(HTML(js))
)

server <- function(input, output, session) {
    
    output$map <- renderLeaflet({
        leaflet() %>% 
            addProviderTiles('Esri.WorldImagery') %>% 
            setView(lng = 118.2437, lat = 34.0522, zoom = 5)
    })
}

shinyApp(ui, server)

Explain:

If you want the controls to also be in the full screen, we need to full screen the container, not just the map.
The leaflet map has a fixed height 400px so in fullscreen, first change its height to max screen height 100vh. This is not enough for the leaflet to adjust the map, we also need to fire the resize event.
When users change fullscreen status, we need to resize the map back to the original size. To do so, we use addEventListener to watch screen change event. Depends on the browser, the event name is different, but we attach the same callback exitHandler.
exitHandler first checks on different browsers, if we are on full screen or normal screen. If normal screen, resize the map to the original size.

This is fantastic! Thank you. Can you briefly explain the JS code additions? — Giovanni Colitti, Apr 22 '22 at 22:26

How to make leaflet map and absolutePanel of inputs / outputs full screen in shiny

1 Answers1