Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

r

leaflet

shiny

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
                                 )
                               )
                        )
                      )
             )
)
like image 352
j_5chneider Avatar asked Sep 30 '16 11:09

j_5chneider


1 Answers

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.

like image 185
j_5chneider Avatar answered Oct 18 '22 22:10

j_5chneider