Making a leaflet map fullscreen in an RShiny dashboard

user_19226934 0
Viewed 118

I'm working on creating an RShiny dashboard with a leaflet map; I want my map to be fullscreen, but I can't quite seem to get the borders/margins to go away. I have tried the solutions offered in a previous post (https://stackoverflow.com/questions/61341817/making-leaflet-map-fullscreen-in-rshiny), but with those solutions I just get a completely blank screen--the map does not seem to render at all. Here is my code:

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)

As you can see, my current workaround is to set the map size based on view height/view width (width = "98vw", height = "90vh"). If I set either of those to 100, the right and bottom edges of the map go off the screen. Again, I have tried both solutions offered in the post I have linked above and both do not work. Unfortunately, I am not familiar enough with HTML, CSS, or JavaScript to really adjust the code in the answers for my situation.

Thanks in advance for any suggestions or solutions!

EDIT: Below is a screenshot to help @L D

enter image description here

leaflet shiny r css html
1 Answers

if the point is to maximize the map over the page up to the navbar and to the left and right and down to the bottom, try the following, it may be too quick and dirty for you though.

It disables the padding/margin of the Shiny components throught 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)

Edit: The JavaScript version

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)

This should keep the map aligned perfectly into the window.

user_39444800
Related