R Shiny: Can't run JS code in a leafletProxy instance - r

Question

I have shinyapp where I have a leaflet map. I want users to be able to click on the polygons and highlight them right away - while unhighlighting the previous polygon. I successfully do this using some JS code after the leaflet call with htmlwidgets::onRender:
library(shiny)
library(leaflet)
library(htmlwidgets)
library(sf)
library(dplyr)
ui <- bootstrapPage(
tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
leafletOutput("map", width = "100%", height = "80%")
)
server <- function(input, output, session) {
data <- st_read(system.file("shape/nc.shp", package="sf")) %>% st_transform(4326)
output$map <- renderLeaflet({
pal <- colorNumeric(
palette = "Blues",
domain = data$AREA)
leaflet() %>%
addTiles() %>% # Add default OpenStreetMap map tiles
addPolygons(data = data,
fillColor = ~pal(data$AREA), fillOpacity = 0.5) %>%
htmlwidgets::onRender("
function(el, x) {
L.control.zoom({
position: 'topright'
}).addTo(this);
var map = this;
var prevLayerClicked = null;
map.eachLayer(function(layer) {
layer.on('click', function(e) {
if (prevLayerClicked == null) {
layer.setStyle({
fillOpacity: 1
});
} else if (prevLayerClicked !== null) {
layer.setStyle({
fillOpacity: 1
});
prevLayerClicked.setStyle({
fillOpacity: 0.5
});
}
prevLayerClicked = layer;
})
.addTo(map);
});
}
")
})
}
shinyApp(ui, server)
But my application has a lot of variables and I wanted to be able to change the map using leafletProxy. But as soon as I implement some observer with leafletProxy (in that case, I created a dummy button to reset the colors), the highlighting function stops working. Same previous example, but now with the observer:
library(shiny)
library(leaflet)
library(htmlwidgets)
library(sf)
library(dplyr)
ui <- bootstrapPage(
tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
leafletOutput("map", width = "100%", height = "80%"),
actionButton(inputId = "reset", label = "Reset Colors")
)
server <- function(input, output, session) {
data <- st_read(system.file("shape/nc.shp", package="sf")) %>% st_transform(4326)
output$map <- renderLeaflet({
pal <- colorNumeric(
palette = "Blues",
domain = data$AREA)
leaflet() %>%
addTiles() %>% # Add default OpenStreetMap map tiles
addPolygons(data = data,
fillColor = ~pal(data$AREA), fillOpacity = 0.5) %>%
htmlwidgets::onRender("
function(el, x) {
L.control.zoom({
position: 'topright'
}).addTo(this);
var map = this;
var prevLayerClicked = null;
map.eachLayer(function(layer) {
layer.on('click', function(e) {
if (prevLayerClicked == null) {
layer.setStyle({
fillOpacity: 1
});
} else if (prevLayerClicked !== null) {
layer.setStyle({
fillOpacity: 1
});
prevLayerClicked.setStyle({
fillOpacity: 0.5
});
}
prevLayerClicked = layer;
})
.addTo(map);
});
}
")
})
observeEvent(c(input$reset), {
req(input$reset >= 1)
leafletProxy("map") %>%
clearShapes() %>%
addPolygons(data = data)
})
}
shinyApp(ui, server)
I have seen some hints like here and here, but couldn't understand the approaches.
Any idea how to solve this?