leaflet in R-shiny: 100% height of leaflet map

Question

I'm trying to built an app that shows a leaflet map. People that'll use the app mostly do it from mobile devices - so it would be convenient to offer the map on the entire screen. You can see the app here: https://js1984.shinyapps.io/stackoverflow/

It works fine for width with leafletOutput("mymap", width = "100%"), however I can't set height to leafletOutput("mymap", width = "100%", height = "100%"): the map will disappear when I run the app... Setting height to a fixed value works fine, but is not an option as you might imagine.

All solutions I found so far did not work for me: like setting height: 100% in the CSS:

html, body, #mymap {
   height:100%;
   width:100%;
   padding:0px;
   margin:0px;
}

The UI part of the app looks like this:

 ui <- navbarPage(title = "test",
             collapsible = T,
             position= "static-top",
             inverse = T,
             #####################################
             # the tab panel that includes the MAP
             #####################################
             tabPanel("Map",
             includeCSS(path="www/bootstrap.css"),
                      leafletOutput("mymap", width =  "100%")
             ),
             #####################################
             # other tab panels
             #####################################
             tabPanel("Fri",
                      fluidRow(
                        includeCSS(path="www/bootstrap.css"),
                        column(6,
                               offset = 3,
                               wellPanel(
                                 checkboxGroupInput("freitag",
                                                    h3("Freitag"),
                                                    list_fr,
                                                    selected = 1
                                 )
                               )
                        )
                      )
             ),
             tabPanel("Sat",
                      fluidRow(
                        column(6,
                               offset = 3,
                               wellPanel(
                                 checkboxGroupInput("samstag",
                                                    h3("Samstag"),
                                                    list_sa
                                 )
                               )
                        )
                      )
             ),
             tabPanel("Sun",
                      fluidRow(
                        column(6,
                               offset = 3,
                               wellPanel(
                                 checkboxGroupInput("sonntag",
                                                    h3("Sonntag"),
                                                    list_so
                                 )
                               )
                        )
                      )
             ),
             tabPanel("Mon",
                      fluidRow(
                        column(6,
                               offset = 3,
                               wellPanel(
                                 checkboxGroupInput("montag",
                                                    h3("Montag"),
                                                    list_mo
                                 )
                               )
                        )
                      )
             ),
             tabPanel("Tues",
                      fluidRow(
                        column(6,
                               offset = 3,
                               wellPanel(
                                 checkboxGroupInput("dienstag",
                                                    h3("Dienstag"),
                                                    list_di
                                 )
                               )
                        )
                      )
             )
)

As far as I know is it not possible to set both attributes (height AND width) to %. — four-eyes, Oct 01 '16 at 13:36
It is possible actually, it is implemented in [Superzip](http://shiny.rstudio.com/gallery/superzip-example.html). But, I couldn't figure out how either. — Dogan Askan, Apr 26 '17 at 21:50
But anyway, here is the [solution](http://stackoverflow.com/questions/36469631/how-to-get-leaflet-for-r-use-100-of-shiny-dashboard-height?rq=1). — Dogan Askan, Apr 26 '17 at 22:11

score 2 · Accepted Answer · answered Jan 31 '18 at 23:01

2

As pointed out by Dogan Askan (thanks!) in this comment a solution using calc() and the window hight worked for me. See this answer for a more elaborated example.

answered Jan 31 '18 at 23:01

j_5chneider

390
5
15

score 0 · Answer 2 · answered Oct 01 '16 at 15:04

See this solution. It applies css to the container-fluid class which may be a disadvantage for the other tabs.... adjust.css goes into the www folder. The basic idea was taken from here

The app is also on this link

ui.R

     library(shiny)
    library(leaflet)

    shinyUI(tagList(
            tags$head(
                    HTML("<link rel='stylesheet' type='text/css' href='adjust.css'>"),
                    HTML("<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />")
            ),
            navbarPage(title = "test",
                       collapsible = T,
                       position= "static-top",
                       inverse = T,
                       #####################################
                       # the tab panel that includes the MAP
                       #####################################

                       tabPanel("Map",
                                #tags$div(id="map",     
                                         leafletOutput("mymap")
                                #)
                       ),
                       #####################################
                       # other tab panels
                       #####################################
                       tabPanel("Fri",
                                fluidRow(

                                        column(6,
                                               offset = 3,
                                               wellPanel(
                                                       checkboxGroupInput("freitag",
                                                                          h3("Freitag"),
                                                                          c("1", "2", "3"),
                                                                          selected = 1
                                                       )
                                               )
                                        )
                                )
                       ),
                       tabPanel("Sat",
                                fluidRow(
                                        column(6,
                                               offset = 3,
                                               wellPanel(
                                                       checkboxGroupInput("samstag",
                                                                          h3("Samstag"),
                                                                          c("1", "2", "3")
                                                       )
                                               )
                                        )
                                )
                       ),
                       tabPanel("Sun",
                                fluidRow(
                                        column(6,
                                               offset = 3,
                                               wellPanel(
                                                       checkboxGroupInput("sonntag",
                                                                          h3("Sonntag"),
                                                                          c("1", "2", "3")
                                                       )
                                               )
                                        )
                                )
                       ),
                       tabPanel("Mon",
                                fluidRow(
                                        column(6,
                                               offset = 3,
                                               wellPanel(
                                                       checkboxGroupInput("montag",
                                                                          h3("Montag"),
                                                                          c("1", "2", "3")
                                                       )
                                               )
                                        )
                                )
                       ),
                       tabPanel("Tues",
                                fluidRow(
                                        column(6,
                                               offset = 3,
                                               wellPanel(
                                                       checkboxGroupInput("dienstag",
                                                                          h3("Dienstag"),
                                                                          c("1", "2", "3")
                                                       )
                                               )
                                        )
                                )
                       )
            )  
    ))

server.R

    library(shiny)
    library(leaflet)

    shinyServer(function(input, output) {
            output$mymap <- renderLeaflet({
                    points <- cbind(rnorm(40) * 2 + 13, rnorm(40) + 48)

                    leaflet() %>%
                            addProviderTiles("Stamen.TonerLite",
                                             options = providerTileOptions(noWrap = TRUE)
                            ) %>%
                            addMarkers(data = points)
            })
    })

adjust.css

body, .container-fluid {
        padding: 0;
        margin: 0;
    }

    html, body, #mymap {

            height: 100%;
            width: 100%;
    }

leaflet in R-shiny: 100% height of leaflet map

2 Answers2