htmlcssshinyr-leaflettmap

How can I change tmap buttons and legend to be behind the footer?

I am making a shiny app with a footer. This footer will have some logos and other info, and it should always appear at the bottom of the screen, even when scrolling up and down. The app is multi-tabbed and on one tab I have an interactive map made with tmap. The problem I am having is that the tmap built in zoom buttons, layer menu, legend and leaflet information is showing up in front of the footer, when I want it to appear behind the footer. See screenshot.

enter image description here

Here is a small reproducible example:

library(shiny)
library(shinythemes)
library(tmap)
library(sf)

nc <-  st_read(system.file("shape/nc.shp", package="sf"), quiet = TRUE)

ui <- navbarPage(
  "App",

  theme = bslib::bs_theme(bg = "#202123", fg = "#B8BCC2"),

  tabPanel("tab", tmapOutput("map")),

  footer = fluidRow(
    tags$div(
      h4("THIS IS A FOOTER"),
      class = "footer",
      style = "position:fixed;bottom:0;width:100%;background-color: white;",
    )
  )
)

server <- function(input, output, session) {

  tmap_mode("view")

  output$map <- renderTmap({
    tm_shape(nc) +
      tm_polygons("AREA")
  })

}

shinyApp(ui, server)
Solution

  • You can set the z-index (see here) of your footer to 10000, this is enough for being larger than the buttons and the legend.

    enter image description here

    library(shiny)
library(shinythemes)
library(tmap)
library(sf)

nc <-
    st_read(system.file("shape/nc.shp", package = "sf"), quiet = TRUE)

ui <- navbarPage(
    "App",
    
    theme = bslib::bs_theme(bg = "#202123", fg = "#B8BCC2"),
    
    tabPanel("tab", tmapOutput("map")),
    
    footer = fluidRow(
        tags$div(
            h4("THIS IS A FOOTER"),
            class = "footer",
            style = "position:fixed;
                     bottom:0;
                     width:100%;
                     background-color: white;
                     z-index: 10000;",
        )
    )
)

server <- function(input, output, session) {
    tmap_mode("view")
    
    output$map <- renderTmap({
        tm_shape(nc) +
            tm_polygons("AREA")
    })
    
}

shinyApp(ui, server)