Leaflet on_click event works once in modal box

[drystanm]

Hi I have a leaflet map output in a modal popup and I am using the _click event to draw markers it works once

`

   output$WorldMap <- renderLeaflet({


     base_map


    })



showModal(session = session,
  modalDialog(
    title = "New Project",size = "l",
    
    selectInput("newProjectDivision",label = "New Project Business Division",
                choices = c(" " = "0","A" = "1","C" = "2"),selected = " "),
    
    
    HTML('<hr style="display:block; margin-top:10px; margin-bottom:1px; border-top:2px solid #8c8b8b;">'),
    div(id= "inline",style = "display:block; margin-bottom:5px; margin-top:5px;",
        #left Pane
        shinyjs::disabled(div(id = "newProjectModalDiv",style ="width:25%; float:left;",
                              textInput("newProjectName", "Project Name", placeholder = ''),
                              selectInput("newModalProjectType","Project Type",choices = c("","A","B"), selected = ""),
                              selectInput("newProjectLocation","Project On/Off Shore",choices = c("A","B"), selected = ""),
                              selectizeInput("newProjectCountry","Project Country",choices = COUNTRIES_CHOICE_LIST,selected = "",multiple = FALSE,
                                             options = list(hideSelected = TRUE)) )
                          
                          
                          )
        
        
        ,div(id = "lat_long_out",
            h5("Lat value"),
            textOutput("LatOutput"),
            br(),
            h5("Long Value"),
            textOutput("LongOutput"))
        
    ),
    
    #Right Pane
    div(id ="RightNewProjectPane",style ="width:75%; float:right;",
        leafletOutput(outputId = "WorldMap")),
    
    div(style = "clear:both;"),
    HTML('<hr style="display:block; margin-top:10px; margin-bottom:1px; border-top:2px solid #8c8b8b;">')
    footer = tagList(
    shinyjs::disabled(actionButton("submitNewProject", "Submit")),
    modalButton("Cancel") )
  
))

}) 


observeEvent(input$WorldMap_click,ignoreInit = TRUE, ignoreNULL = FALSE, label = "mapClickEvent",{
  
  
  latLongList <- input$WorldMap_click
  
  lat <- latLongList$lat
  long <- latLongList$lng
  
  print(lat)
  print(long)
  
  
  mapProxy  %>% clearMarkers()
  
  mapProxy  %>% addMarkers(lng = long, lat = lat)
  
  sprintState$newProjectLat <- lat
  sprintState$newProjectLong <-  long
  
  })



    `

However after the modal box is closed and then reopened, the observed event is not fired again and the markers are not drawn. Is the reactive domain not constant in modal's ? As I use other observeEvent for this modal box and these work fine just the map_click event is broken. Thanks

[gregleleu]

I am experiencing the exact same issue. Full repo below. I believe it has something to do with the parent div being destroyed, not modals specifically:

• I tried a version where the map is selectively not rendered (using req(input$a_switch_input)) and the issue does not appear.
• In another version I'm using renderUi to render the map div, turning it on or off, and it leads to the same bad behavior (second reprex)

Tested other events (map zoom, marker click) and none of them work. Proxy updates don't work either (e.g. setView), and they output the "Couldn't find map with id ..." message.

One thing I noticed: on the first render, the mal is attached to the element $('#WorldMap').data("leaflet-map") returns the map object. On the following ones the link is lost (returns undefined).

Modal version

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

# Define UI for application that draws a histogram
ui <- fluidPage(
  
  actionButton("go", "Start")
  
)

# Define server logic required to draw a histogram
server <- function(input, output) {
  
  output$WorldMap <- renderLeaflet({
    leaflet() %>%
      addProviderTiles("CartoDB.Positron")
  })
  
  
  observeEvent(input$go, {
    showModal(
      modalDialog(
        leafletOutput(outputId = "WorldMap"),
        
        footer = tagList(
          modalButton("Cancel") 
        )
      ))
  })
 
  mapProxy <- leaflet::leafletProxy("WorldMap")
  
  observeEvent(input$WorldMap_click, ignoreInit = TRUE, ignoreNULL = FALSE, label = "mapClickEvent",{
    
    
    latLongList <- input$WorldMap_click
    
    lat <- latLongList$lat
    long <- latLongList$lng
    
    print(lat)
    print(long)
    
    
    mapProxy  %>% clearMarkers()
    
    mapProxy  %>% addMarkers(lng = long, lat = lat)
    
    
  })
  
  
}

# Run the application 
shinyApp(ui = ui, server = server)

RenderUI version

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

# Define UI for application that draws a histogram
ui <- fluidPage(
  
  shinyWidgets::materialSwitch(
    inputId = "map_on",
    label = "Primary switch", 
    status = "primary",
    right = TRUE
  ),
  
  uiOutput("mapOutput")
  
  
  
  
)

# Define server logic required to draw a histogram
server <- function(input, output) {
  
  output$WorldMap <- renderLeaflet({
    
    leaflet() %>%
      addProviderTiles("CartoDB.Positron")
  })
  
  output$mapOutput <- renderUI({
    req(input$map_on)
    leafletOutput(outputId = "WorldMap")
  })
  
 
  mapProxy <- leaflet::leafletProxy("WorldMap")
  
  observeEvent(input$WorldMap_click,ignoreInit = TRUE, ignoreNULL = FALSE, label = "mapClickEvent",{
    
    
    latLongList <- input$WorldMap_click
    
    lat <- latLongList$lat
    long <- latLongList$lng
    
    print(lat)
    print(long)
    
    
    mapProxy  %>% clearMarkers()
    
    mapProxy  %>% addMarkers(lng = long, lat = lat)
    
    
  })
  
  
}

# Run the application 
shinyApp(ui = ui, server = server)

[gregleleu]

After more digging: The "shiny-bound-output" class present when the htmlwidget factory is called the first time around, but the second it only gets added after so the shiny-specific rendering (events, proxy etc.) isn't working