Get user geolocation when checkbox == T

[sesame]

UPDATE

Thanks everyone, I found the answer here: 4 tricks for working with R, Leaflet and Shiny | R-bloggers

---

Hi dear community,

I want to have a checkbox input "Use My Location" in my Shiny app, of which when checked, an "allow access location" box powered by JavaScript will pop up on the screen. And if allowed, a leaflet map will zoom into my current location with a marker shown.

I managed to implement what I want with this example: GitHub - AugustT/shiny_geolocation: A demonstration of how geolocation from a smartphone or PC can be used in a shiny app , except that the checkbox is not working. The JS script runs as soon as I open the app, but I only want it to run when the checkbox is T.

How can I delay the action of the JS script?

I have been using Shiny for a while but have very limited knowledge of JavaScript. Have been looking at answers everywhere but just couldn't wrap my head around it!

Here's the working app which is not really connected to the checkbox:

library(shiny)
library(shinyMobile)
library(leaflet)

points = data.frame(name = c("point1", "point2", "point3", "point4", "point5"),
                    lat = c(-41.37602, -39.31389, -38.75368, -38.78520, -38.78108),
                    lon = c(172.0755, 174.9683, 177.1474, 175.7318, 175.7343)
          )

ui <- f7Page(

  tags$script('
      $(document).ready(function () {
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
              
        function onError (err) {
          Shiny.onInputChange("geolocation", false);
        }
              
        function onSuccess (position) {
          setTimeout(function () {
            var coords = position.coords;
            console.log(coords.latitude + ", " + coords.longitude);
            Shiny.onInputChange("geolocation", true);
            Shiny.onInputChange("lat", coords.latitude);
            Shiny.onInputChange("long", coords.longitude);
          }, 1100)
        }
  });
              '),

  f7TabLayout(
    
    navbar = f7Navbar(
      title = "Sample App",
      hairline = F, 
      shadow = F,
      leftPanel = F,
      rightPanel = F
    ),
    
    f7Tabs(
      animated = F,
      swipeable = F,
      
      f7Tab(
        tabName = "map",
        icon = f7Icon("map"),
        active = TRUE,
        
        absolutePanel(
          top = 50, left = 10, draggable = F, width = "20%", style = "z-index:500; min-width: 300px;",
          br(),
          br(),
          f7checkBox("checkbox", label = "Use my location", value = F)
        ),
        
        leafletOutput("map", width = "100%", height = "100%"),
        
        tags$style(type = "text/css", "html, body {width:100%;height:100%}")
      )
    )
  )
)

server <- function(input, output, session) {
  
  map <- reactive({
    leaflet(options = leafletOptions(zoomControl = FALSE)) %>%
      addProviderTiles("CartoDB.Positron") %>%
      setView(176, -41, zoom = 6) %>% 
      addCircleMarkers(
        lng = points$lon,
        lat = points$lat,
        fillOpacity = 1,
        stroke = F,
        radius = 8
      )
  }) 
  
  output$map <- renderLeaflet({
    map()
  })

  observeEvent(input$checkbox, {
    
# ideally I only want the JS script to run when meeting this condition
# right now it's just showing the point when meeting the condition
# location is loaded as soon as app starts (if user agree access)

    if(input$checkbox == T) {
      
      leafletProxy("map") %>%
        addCircleMarkers(
          lng = input$long,
          lat = input$lat,
          fillOpacity = 1,
          stroke = F,
          radius = 8,
          color = "red")
    }
  })
}

shinyApp(ui, server)

Any help would be appreciated. Thank you!