How to insert Javascript code into Leaflet in R to not fire click even when double-clicking

Question

I would like to preserve the "double-click to zoom" functionality in leaflet (in R), but would also like to add a click-event. In this case, the click-event should zoom the user out to a set view. I have not been able, however, to preserve the double-click functionality. I think it should be possible, just by adding some JS code, but am not sure.

This is what I have so far:

library(shiny)
library(htmlwidgets)

location=c(46.52433,10.12633)

ui <- fluidPage(
  leafletOutput("map")
)

server <- function(input, output, session) {
  
  output$map = renderLeaflet({
    leaflet() %>% addTiles()  %>% setView(lat = location[1],lng = location[2],zoom = 10) %>% 
      addMarkers(lat = location[1],lng = location[2],popup = "Test") %>%
      htmlwidgets::onRender("
                map.on('click', function(event) {
     if (_dblClickTimer !== null) {
                            return;}
                            _dblClickTimer = setTimeout(() => {
                            
                            // real 'click' event handler here
                     // This is where I'm trying to insert code to have the click zoom out to the bounds.
                            map.flyToBounds([[36.578548,48.888541],
                                        [69.310383,-25.115366]
                                          ]);
                            _dblClickTimer = null;
                            }, 200);})

                            .on('dblclick', function() {
                            clearTimeout(_dblClickTimer);
                            _dblClickTimer = null;
                            
                            // real 'dblclick' handler here (if any). Do not add anything to just have the default zoom behavior
                            
});
                            ")
      
  })
  
  # Normally, I would create the click-even in Shiny, using the observeEvent function, as shown below.
  # Unfortunately, however, this messes with the double-click-to-zoom functionality. 
  #
  # observeEvent(input$map_click{
  #   leafletProxy("map") %>% flyToBounds(lng1 =-25.555731 ,lat1 = 69.200741,lng2 = 51.436455,lat2 =35.833665 )
  #   
  # })
  
}

shinyApp(ui, server)

I'm using the code suggested by @keul here to try an preserve the double-click functionality. I cannot, however, seem to make it work.

Answer 1

Here is the JS code:

js <- '
function(el, x){
  var _dblClickTimer = null;
  this.on("click", function(event){
    if(_dblClickTimer !== null){
      return;
    }
    _dblClickTimer = setTimeout(() => {
      this.flyToBounds(
        [[36.578548,48.888541], [69.310383,-25.115366]]
      );
      _dblClickTimer = null;
    }, 200);
  })
  .on("dblclick", function(){
    clearTimeout(_dblClickTimer);
    _dblClickTimer = null;
  });
}
'

Then %>% onRender(js).