Search code examples
rshinyr-leaflet

Marker zoom issues


I want to be able to double click on a custom marker and have the map recenter and zoom. Im not sure if it should be doing it automatically and just isn't or if i need a special code.

Below is my current marker code:

ui <- bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "100%")) 
server <- function(input, output){
  output$map <- renderLeaflet({
    m <- leaflet(wins) %>% addProviderTiles(providers$OpenStreetMap)
    m %>% setView(-72.690940, 41.651426, zoom = 12)
    m %>% addMarkers(~lng, ~lat,
      icon = greenLeafIcon,
      popup = paste("Where:", wins$Where,"<br>", "What:", wins$What,"<br>", "Who:", wins$Who,"<br>", "Why:", wins$Why,"<br>", "Order Date:", wins$OrderDate,"<br>", "Go Live Date:", wins$GoLiveDate, "<br>","<a href='",wins$link,"' target='_blank'>",wins$link,"</a>"),
      clusterOptions = markerClusterOptions(color="#0017bb"),
      centerMap
      label = wins$Name,
      labelOptions = labelOptions(noHide = F)) 
  })
}
shinyApp(ui, server)

> dput(wins)
structure(list(Name = structure(c(9L, 6L, 11L, 4L, 2L, 10L, 5L, 
3L, 8L, 1L, 7L), .Label = c("Brigam", "Brown", "Buffalo", "Cornell", 
"Maine Medical", "MGH", "Middlesex", "North Maine", "Tufts", 
"UVM", "Yale"), class = "factor"), Where = structure(c(9L, 6L, 
11L, 4L, 2L, 10L, 5L, 3L, 8L, 1L, 7L), .Label = c("Brigam", "Brown", 
"Buffalo", "Cornell", "Maine Medical", "MGH", "Middlesex Medical Hospital", 
"North Maine", "Tufts", "UVM", "Yale"), class = "factor"), What = structure(c(1L, 
1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L), .Label = "saple3", class = "factor"), 
    Who = structure(c(1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
    1L), .Label = "RML-  SAM-", class = "factor"), 
    Why = structure(c(1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
    1L), .Label = "sample", class = "factor"), OrderDate = structure(c(1L, 
    1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L), .Label = "Q1", class = "factor"), 
    GoLiveDate = structure(c(1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
    1L, 1L, 1L), .Label = "Q2", class = "factor"), lat = c(42.349598, 
    42.361542, 41.303229, 40.764991, 41.819064, 44.47972, 43.653243, 
    42.886447, 47.140694, 42.33597, 41.55466), lng = c(-71.063541, 
    -71.0688334, -72.933826, -73.95479, -71.408277, -73.194072, 
    -70.276184, -78.87836, -68.269043, -71.10766, -72.64815), 
    link = structure(c(1L, 2L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
    3L), .Label = c("http:\\\\www.google.com", "http:\\\\www.google.org", 
    "https://google.com"
    ), class = "factor")), .Names = c("Name", "Where", "What", 
"Who", "Why", "OrderDate", "GoLiveDate", "lat", "lng", "link"
), class = "data.frame", row.names = c(NA, -11L))

Solution

  • Unfortunately AFAIK there is no double_click event in leaflet (I'd love to be proved wrong).

    If you are ok with a single click, we can do:

    server <- function(input, output){
        output$map <- renderLeaflet({
            m <- leaflet(wins) %>% 
                addProviderTiles(providers$OpenStreetMap) %>% 
                addMarkers(~lng, ~lat,
                           #icon = 'greenLeafIcon',
                           popup = paste("Where:", wins$Where,"<br>", "What:", wins$What,"<br>", "Who:", wins$Who,"<br>", "Why:", wins$Why,"<br>", "Order Date:", wins$OrderDate,"<br>", "Go Live Date:", wins$GoLiveDate, "<br>","<a href='",wins$link,"' target='_blank'>",wins$link,"</a>"),
                           clusterOptions = markerClusterOptions(color="#0017bb"),
                           #centerMap,
                           label = ~Name,
                           labelOptions = labelOptions(noHide = F)) 
        })
    
        observe({
            click <- input$map_marker_click
            zoom <- isolate(input$map_zoom)
            if(is.null(click))
                return()
    
            leafletProxy('map') %>% 
                setView(click$lng, click$lat, zoom = zoom)
        })
    }
    

    What it does it's observe the map_marker_click event, when that happen leafletProxy() will update the 'map' output to the specified lng, lat and zoom. We need to isolate input$zoom, otherwise the observe would launch every time we change the zoom, causing weird behaviors.