How to use a Cicerone guide for elements of a leaflet map in R Shiny?

Question

Using the Cicerone package, I am trying to create some guide steps for elements inside an r-leaflet map. I have tried a variety of CSS selectors I can think of from inspecting the elements and using a CSS Selector tool (see screenshot below). But nothing has worked. How can I accomplish this?

library(shiny)
library(leaflet)
library(cicerone)


guide <- Cicerone$new()$
  step(
    el = ".legend", 
    title = "Legend",
    description = "This is the legend on the map.",
    is_id = FALSE
  )

ui <- fluidPage(
  use_cicerone(),
  mainPanel(
    leafletOutput("map"),
    br(),
    actionButton("start_tour", "Start Tour"),
    br(),
    textOutput("status")
  )
)

server <- function(input, output, session) {
  
  output$status <- renderText("Not run yet")
  
  output$map <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%
      setView(lng = -93.65, lat = 42.0285, zoom = 10) %>%
      addLegend("bottomright", title = "Legend", colors = "red", labels = "Label")
  })

  observeEvent(input$start_tour, {

    guide$init()$start()
    
    output$status <- renderText("observe block has executed")

    }) 
  

    
    
}

shinyApp(ui, server)

Answer 1

You need to pass all classes, use

el = ".info.legend.leaflet-control"