shiny leaflet map making a panel disapear

Question

I am facing a difficulty while constructing a shiny app. I want a map where I can click cities to display data. I took something similar to this to have a plain map, with a sidebar containing tabs.

I would like to add a top panel containing inputs common to all tabs (like selecting the data set of interest, buttons to select the cities etc). But the map make the top panel partially disappear, and I can't figure out why, nor can I find a solution.

Here is the example:

library(shiny)
library(leaflet)
library(maps)

rm(list = ls())
mapStates = map("world", fill = TRUE, plot = FALSE)

    ui <- fluidPage(
  fluidRow(
    column(width = 4,offset = 2,
           wellPanel(selectInput("dataset", "Choose a dataset:",
                                 choices = c("Temperature max" = 1,
                                             "Temperature mean" = 2,
                                             "Temperature min" = 3,
                                             "Precipitation" = 4,
                                             "Snow depth" = 5,
                                             "Maximum wind speed" = 6,
                                             "average win speed" = 7)))
    ),
    column(4,wellPanel(numericInput("citynum", "Number of city to select:", value = 1,min = 1,max = 3,step = 1)))
  ),

  sidebarLayout(
    mainPanel(
      div(class="outer",
          tags$style(type = "text/css", ".outer {position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}"),
          leafletOutput("mymap",height = "100%",width = "100%"))
    ),

    sidebarPanel(sliderInput("obs", "Number of observations:",  
                             min = 1, max = 1000, value = 500))
  )
)
server <- function(input, output, session) {
  output$mymap <- renderLeaflet({
    leaflet(data = mapStates, options = leafletOptions(minZoom = 3, maxZoom = 18)) %>% 
      #clearBounds() %>%
      addTiles() %>% 
      addProviderTiles(providers$Stamen.TonerLite,
                       options = providerTileOptions(noWrap = TRUE))
  })
}

shinyApp(ui, server)

Which results in

Here I don't have the panel nor the numericInput. But if I place the fluid row containing my top panel after the mainPanel containing the map, the panel is displayed:

ui <- fluidPage(

  sidebarLayout(

    mainPanel(
      div(class="outer",
      tags$style(type = "text/css", ".outer {position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}"),
      leafletOutput("mymap",height = "100%",width = "100%"))
    ),

    sidebarPanel(sliderInput("obs", "Number of observations:",  
                             min = 1, max = 1000, value = 500))
    ),
  fluidRow(column(width = 4,offset = 2,
                  wellPanel(selectInput("dataset", "Choose a dataset:",
                                        choices = c("Temperature max" = 1,
                                                    "Temperature mean" = 2,
                                                    "Temperature min" = 3,
                                                    "Precipitation" = 4,
                                                    "Snow depth" = 5,
                                                    "Maximum wind speed" = 6,
                                                    "average win speed" = 7)))
  ),
  column(4,wellPanel(numericInput("citynum", "Number of city to select:", value = 1,min = 1,max = 3,step = 1)))
  )
)

But this is not at the right place. So my questions:

How to diplay the panel at the top and keep the full size map with side panel ?
this is a secondary question : how to have a panel lasting the entire fluirRow for my top panel ?

shiny leaflet map making a panel disapear

0 Answers