Conditional panel does not appear in map

Question

I would like to display a conditional panel in my map when I click on a circle, and this conditional panel must disappear if I click outside a circle, but it does not appear and I don't know why.

I think it's about reactive values (one more time).

If any idea, please tell me.

This is a reproducible example:

ui :

library(shiny)
library(leaflet)

ui <- fluidPage(
  leafletOutput("mymap",width="100%",height="750px"), 
    
  conditionalPanel(

    condition = "output.COND == '2'",

    fluidRow(
  
      absolutePanel(id = "cond_panel", 
                    class = "panel panel-default", 
                    fixed = TRUE,
                    draggable = TRUE, 
                    top = "auto", 
                    left = 200, 
                    right = "auto", 
                    bottom = 0,
                    width = 400, 
                    height = 400,
                    fluidRow(
                  
                    ) # e. of fluidRow(
                
       ) # # e. of absolutePanel
  
    ) # e. of fluidRow

  ) # e. of conditionalPanel

) # e. of fluidPage

and the server :

server <- function(input, output){

  rv <- reactiveValues()
  rv$myDf <- NULL
  rv$cond <- NULL

  cities <- read.csv(textConnection("
                                City,Lat,Long,Pop
                                Boston,42.3601,-71.0589,645966
                                Hartford,41.7627,-72.6743,125017
                                New York City,40.7127,-74.0059,8406000
                                Philadelphia,39.9500,-75.1667,1553000
                                Pittsburgh,40.4397,-79.9764,305841
                                Providence,41.8236,-71.4222,177994
                                "))
  cities$id <- 1:nrow(cities) 

  output$mymap <- renderLeaflet({
    leaflet(cities) %>% addTiles() %>%
      addCircles(lng = ~Long, lat = ~Lat, weight = 1,
             radius = ~sqrt(Pop) * 30, popup = ~City, layerId = ~id)
  })

  observeEvent(input$mymap_click, {

    print("map clicked")
    rv$cond <- "1"
    print(paste("Value rv$cond = ", rv$cond))
    output$COND <- reactive({rv$cond})
    leafletProxy("mymap")
  
  }) # e. of observeEvent

  observeEvent(input$mymap_shape_click, {

    print("shape clicked")
    rv$cond <- "2"
    print(paste("Value rv$cond = ", rv$cond))
    output$COND <- reactive({rv$cond})
    leafletProxy("mymap")

  }) # e. of observeEvent

} # e. of server

Answer 1

Just use the absolutePanel inside a conditionalPanel whose condition you reset based on user input.

Answer 2

I'm going to propose a slightly different approach that uses library(shinyjs) to use javascript to control whether the panel is hidden or not.

In this example I've created a hidden div element (i.e., the panel will start hidden when the app opens). Then the 'div' is shown when the circle is clicked, and hidden again when the map is clicked.

This answer is inspired by @Daattali's answer here (he's the author of library(shinyjs).

library(shiny)
library(leaflet)
library(shinyjs)

ui <- fluidPage(
    useShinyjs(),     ## Call to use shinyJS
    leafletOutput("mymap",width="100%",height="750px"), 

    #conditionalPanel(

        #condition = "output.COND === '2'",
    hidden( 
        div(id = "conditionalPanel",
            fluidRow(

                absolutePanel(id = "cond_panel", 
                            class = "panel panel-default", 
                            fixed = TRUE,
                            draggable = TRUE, 
                            top = "auto", 
                            left = 200, 
                            right = "auto", 
                            bottom = 0,
                            width = 400, 
                            height = 400,
                            fluidRow(

                    ) # e. of fluidRow(

                ) # # e. of absolutePanel

            ) # e. of fluidRow
        )
    )

#   ) # e. of conditionalPanel

) # e. of fluidPage


server <- function(input, output){

    rv <- reactiveValues()
    rv$myDf <- NULL
    rv$cond <- NULL

    cities <- read.csv(textConnection("
                        City,Lat,Long,Pop
                        Boston,42.3601,-71.0589,645966
                        Hartford,41.7627,-72.6743,125017
                        New York City,40.7127,-74.0059,8406000
                        Philadelphia,39.9500,-75.1667,1553000
                        Pittsburgh,40.4397,-79.9764,305841
                        Providence,41.8236,-71.4222,177994
                        "))
    cities$id <- 1:nrow(cities) 

    output$mymap <- renderLeaflet({
        leaflet(cities) %>% addTiles() %>%
            addCircles(lng = ~Long, lat = ~Lat, weight = 1,
                                 radius = ~sqrt(Pop) * 30, popup = ~City, layerId = ~id)
    })

    observeEvent(input$mymap_click, {

        shinyjs::hide(id = "conditionalPanel")
        print("map clicked")
        rv$cond <- "1"
        print(paste("Value rv$cond = ", rv$cond))
        output$COND <- reactive({rv$cond})
        leafletProxy("mymap")

    }) # e. of observeEvent

    observeEvent(input$mymap_shape_click, {

        shinyjs::show(id = "conditionalPanel")
        print("shape clicked")
        rv$cond <- "2"
        print(paste("Value rv$cond = ", rv$cond))
        output$COND <- reactive({rv$cond})
        leafletProxy("mymap")

    }) # e. of observeEvent

} # e. of server

shinyApp(ui, server)