How to programmatically click element on DrawToolbar?

Question

For some reason I would like to draw polygon using button but not the one from the Toolbar. In short, I want to click 'Click me!' button and start drawing polygon instead of choosing this option from toolbar. I tried to use jquery to trigger 'click' action on toolbar but can't do this at all. I noticed that 'buttons' on toolbar are not really buttons but simple classes. Maybe that's why I can't 'click' on them programatically. I also tried to use observeEvent but can't do this either. Do you have any idea how can I trigger this action?

Here's working example:

library(shiny)
library(leaflet)
library(leaflet.extras)
library(dplyr)
library(sf)

ui <- fluidPage(
    actionButton("btn", label = "Click me!"),
    leafletOutput("map")
)

server <- function(input, output, session) {
    
    coords <- quakes %>%
        sf::st_as_sf(coords = c("long","lat"), crs = 4326)

    output$map <- leaflet::renderLeaflet({
    leaflet::leaflet() %>% 
        leaflet::addTiles() %>% 
      leaflet::setView(172.972965,-35.377261, zoom = 4) %>%      
      leaflet::addCircleMarkers(
        data = coords,
        stroke = FALSE,
        radius = 6
        ) %>%         
      leaflet.extras::addDrawToolbar()
  })

}

shinyApp(ui, server)

and here's my jQuery code which should trigger 'draw polygon' option on toolbar but is not working:

$('#btn').click(function(){
  $('.leaflet-draw-draw-polygon').click();
});

When is your jQuery code executed, compared to the code of the shiny app? — ghybs, Mar 24 '21 at 18:35
It's executed when I click 'Click me' button. I could also use `observeEvent` on this button but the problem is that neither jquery nor observeEvent trigger 'draw polygon' element. I have no idea how to do this, if you have please share your solution — mustafa00, Mar 24 '21 at 18:55
I also checked this topic: https://gis.stackexchange.com/questions/238528/how-to-enable-a-leaflet-draw-tool-programatically/238535#238535 but it doesn't work. Other jquery functions work properly in my code — mustafa00, Mar 24 '21 at 19:05

score 1 · Accepted Answer · answered Mar 24 '21 at 21:06

I found a solution to my issue. In jQuery, instead of:

$('.leaflet-draw-draw-polygon').click();

there should be:

document.querySelector('.leaflet-draw-draw-polygon').click();

I don't know why the second one works and first one does not, they do the same job. Anyways, this solves the issue.

score 0 · Answer 2 · answered Mar 23 '21 at 15:51

0

If you want something to happen when you click an actionButton() UI element, use observeEvent() to trigger code to run when the status of the button changes (when it's clicked, for example). Something like this in your server code would probably work:

observeEvent(input$btn, {
  # the code you want to run when button is clicked
}

answered Mar 23 '21 at 15:51

chemdork123

12,369
2
16
32

I know this:) but in this particular case I need to use jquery. But even if I used `observeEvent` to trigger 'draw polygon' action from toolbar I have no idea how to do this. I don't think it's possible. I could at best show/hide the whole toolbar using `observeEvent` but I guess I can't do this for its element - 'draw polygon' – mustafa00 Mar 23 '21 at 16:00

How to programmatically click element on DrawToolbar?

2 Answers2