How to plot leaflet map in shiny mainPanel

[davi_d]

How can you resize a leaflet map in the mainPanel of a shiny app? Any hints please?

The following works, but the map is too small. (EDIT: By too small, I mean that when the page is set to full the map is only rendered vertically for a small bit rather than for the full vertical page)

ui <- bootstrapPage(
            sidebarLayout(
                sidebarPanel("sidebar panel"),
                mainPanel(leafletOutput("map") 
            )))

server <- function(input, output, session) {
  output$map <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%  
      addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R") 
      })
}

shinyApp(ui, server)

Changing mainPanel(leafletOutput("map") ) to mainPanel(leafletOutput("map", width = "100%", height = "100%") ) stops the map from rendering. Similarly, the following does not render

ui <- bootstrapPage(
            sidebarLayout(
                column(3, "sidebar panel"),
                column(9, leafletOutput("map", width = "100%", height = "100%"))  # the 100% stops this running
            ))

An answer at r - Leaflet in Shiny - Stack Overflow kind of works except that it moves the map underneath the sidebarPanel, where as I would like it just in the mainPanel space.

ui <- fluidPage(
            sidebarLayout(
                sidebarPanel("sidebar panel"),
                mainPanel( bootstrapPage(
                             div(class = "outer", tags$style(type = "text/css", ".outer {position: fixed; top: 120px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}"),
                                 leafletOutput("map", width = "100%", height = "100%")
            )))))

[jlacko]

Would plain width work in your use case? It adjusts the relative width of sidebar and main panel, the default ratio being 1:2; in this example I am applying 1:5 ratio (the widths are supposed to add up to 12, don't ask me why).

library(shiny)
library(leaflet)

ui <- bootstrapPage(
sidebarLayout(
    sidebarPanel("sidebar panel", width = 2),
    mainPanel(leafletOutput("map"), width = 10)
    ))

server <- function(input, output, session) {
    output$map <- renderLeaflet({
        leaflet() %>%
            addTiles() %>%  
            addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R") 
    })
}

shinyApp(ui, server)

[davi_d]

Thanks for your answer @jlacko. Unfortunately, this suffers from the same issue as in the first example in my question; upon making it full screen the map is only in a small bit at the top. (it also show my question wasn't clear when i wrote "map is too small." -- sorry)

[nirgrahamuk]

try using 100% of view height , like this :

leafletOutput("map",height="100vh")

[davi_d]

@nirgrahamuk

height="100vh"

Yes! Thanks @nirgrahamuk that is what I was hoping for. And you gave me further search terms.

(for others see CSS values and units - Learn web development | MDN to see what 'vh' is, and perhaps this javascript - How to get a leaflet map canvas to have a 100% height? - Stack Overflow)