Search code examples
rshinyselectize.jsr-leaflet

Choices in selectInput to appear over a Leaflet Map

I am building a shiny application where a user is able to see ships of various types by selecting a vessel type from a selectInput(). Based on the selection, vessels get filtered and are displayed on a leaflet map. However, the choices in the selectInput are curretly appearing below the leaflet map as shown here:enter image description here

Is there some way of ensuring that the choices are not hidden under the controls on the leaflet map. I don't want to move the location of the selectInput as there are more filters expected to come next to it.

Solution

  • Modify the z-index of the dropdown element by adding this line in the ui:

    tags$head(tags$style('.selectize-dropdown {z-index: 10000}'))

    Using the example here, a working code would look like this:

    library(shiny)
library(leaflet)

r_colors <- rgb(t(col2rgb(colors()) / 255))
names(r_colors) <- colors()

ui <- fluidPage(
  tags$head(tags$style('.selectize-dropdown {z-index: 10000}')),
  selectInput("select", "Select", choices = c("A", "B")),
  leafletOutput("mymap"),
  p(),
  actionButton("recalc", "New points")
)

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

  points <- eventReactive(input$recalc, {
    cbind(rnorm(40) * 2 + 13, rnorm(40) + 48)
  }, ignoreNULL = FALSE)

  output$mymap <- renderLeaflet({
    leaflet() %>%
      addProviderTiles(providers$Stamen.TonerLite,
                       options = providerTileOptions(noWrap = TRUE)
      ) %>%
      addMarkers(data = points())
  })
}

shinyApp(ui, server)