leaflet, shiny and z-index issues

README.md

z-index issues in leaflet maps and shiny apps

Dropdown menus in shiny apps (created with selectInput()) will appear below the zoom buttons in a leaflet map without intervention.

The issues is due to the z-index of the different web elements, which controls what appears on top of what. To change the z-index of the dropdown menu we can use div(control, style = "position:relative;z-index:10000;"

server.R

library("tidyverse")
library("leaflet")
library("sf")
library("leaflet.extras")
library("rnaturalearth")

sf_countries <- countries110 %>%
  st_as_sf() %>%
  filter(!continent == "Antarctica")

function(input, output, session) {
  output$earthquake_map <- renderLeaflet({
    leaflet() %>%
      addPolygons(
        data = sf_countries %>%
          filter(!continent == input$highlighted_continent),
        weight = 1,
        fillColor = "grey",
        fillOpacity = 1,
        color = "black"
      ) %>%
      addPolygons(
        data = sf_countries %>%
          filter(continent == input$highlighted_continent),
        weight = 1,
        fillColor = "crimson",
        fillOpacity = 1,
        color = "black"
      ) %>%
      leaflet.extras::setMapWidgetStyle(style = list(background = "DeepSkyBlue"))
  })
}

ui.R

library("leaflet")

fluidPage(
  div(selectInput("highlighted_continent",
    label = "Highlight continent",
    choices = c("Asia", "Africa", "Europe", "South America", "Seven seas (open ocean)", "Oceania", "North America")
  ), style = "position:relative;z-index:10000;"),
  leafletOutput("earthquake_map")
)