Distinguish between input$map_click and input$map_shape_click in Leaflet R Shiny

Question

What I would like to do is that if a user clicks on a line, it displays the line name in the box to the right of the map, and if a user clicks somewhere else on the map, it 'deselects' that line:

The problem is that when a user clicks the polyline, leaflet fires both a map_shape_click (the polyline) and map_click (the map) event. Even more annoyingly, it fires the map_shape_click event before the map_click event.

How can I distinguish whether the user has clicked a line, or just the base map, so that my select/deselect works? Reproducible example:

library(shiny)
library(tidyverse)
library(leaflet)


ui <- fluidPage(
    
  fluidRow(
    column(
      width = 8,
      leafletOutput("map")
    ),
    column(
      width = 4,
      uiOutput("info")
    )
  )
    
    
    
)


server <- function(input, output) {
  output$map <- renderLeaflet({
    leaflet() %>% 
      addTiles() %>%
      setView(lng = -71.03165, lat = 42.37595, zoom = 13) %>%
      addPolylines(lng = c(-71.05884, -71.02), lat = c(42.360081, 42.359),
                   layerId = "line1") %>%
    addPolylines(lng = c(-71.05884, -71.05), lat = c(42.360081, 42.4),
                 layerId = "line2")
  })
  
  
  observeEvent(input$map_shape_click, {
    x <- input$map_shape_click
    output$info <- renderUI({
      div(
        "Line: ", x$id
      )
    })
  })
  
  observeEvent(input$map_click, {
    output$info <- renderUI({
      div(
        "Nothing selected"
      )
    })
  })
    
}


shinyApp(ui = ui, server = server)

user_13002643 · Answer

library(shiny)
library(tidyverse)
library(leaflet)


ui <- fluidPage(
    
    fluidRow(
        column(
            width = 8,
            leafletOutput("map")
        ),
        column(
            width = 4,
            uiOutput("info")
        )
    )
    
    
    
)


server <- function(input, output) {
    output$map <- renderLeaflet({
        leaflet() %>% 
            addTiles() %>%
            setView(lng = -71.03165, lat = 42.37595, zoom = 13) %>%
            addPolylines(lng = c(-71.05884, -71.02), lat = c(42.360081, 42.359),
                         layerId = "line1") %>%
            addPolylines(lng = c(-71.05884, -71.05), lat = c(42.360081, 42.4),
                         layerId = "line2")
    })
    
    clicked <- reactiveVal()
    
    observeEvent(input$map_shape_click, {
        freezeReactiveValue(input, 'map_click')
        clicked(input$map_shape_click)
    })
    
    observeEvent(input$map_click, {
        clicked(input$map_click)
    })
    output$info <- renderUI({
        req(clicked())
        if(is.null(clicked()[['id']])) return(div("Nothing selected"))
        div("Line: ", clicked()$id)
    })
    
}


shinyApp(ui = ui, server = server)

Things are a little tricky here. we use freezeReactiveValue to freeze the map click, meaning if there is any shape click event, we do not update the value of map_click. This is a little advanced shiny. I recommend you read the help file and read this chapter: https://mastering-shiny.org/action-dynamic.html#freezing-reactive-inputs

Distinguish between input$map_click and input$map_shape_click in Leaflet R Shiny

1 Answers