Display coordinates in a table when markers are dragged in shiny app

Question

In my simple shiny app, I'm able to drag the markers on the map and see their new coordinates in observe function :

coords_data <- data.frame(id = 1:3, lng = c(2, 30, 50), lat = c(48, 40, 60)) 

library(shiny)
library(leaflet)
library(tidyverse)

ui = fluidPage(
    leafletOutput('map'),
    textOutput('dragEndLocation')
)

server = function(input, output, session){
  
    output$map <-renderLeaflet({ 
      leaflet()%>%
        addTiles()%>%
        addMarkers(data = coords_data, 
                   options = markerOptions(draggable = TRUE))
      
    })
    
    
      observe({
        print(input$map_marker_dragend)
      })
    

                   
}


shinyApp(ui, server)

however, I would like to print the final coordinates in a table which I don't know how ! I tried this example but was not successful.

Furthermore I want to replace the markers by circles :

coords_data <- data.frame(id = 1:3, lng = c(2, 30, 50), lat = c(48, 40, 60)) 

library(shiny)
library(leaflet)
library(tidyverse)

ui = fluidPage(
    leafletOutput('map'),
    textOutput('dragEndLocation')
)

server = function(input, output, session){
  
    output$map <-renderLeaflet({ 
      leaflet()%>%
        addTiles()%>%
        addCircles(data = coords_data, 
                   options = markerOptions(draggable = TRUE),
                   radius = 100,color="red")%>%
        addDrawToolbar(circleOptions=NA, markerOptions=NA,
                       polygonOptions=NA, rectangleOptions=NA,
                       polylineOptions=NA)
      
    })
    
    
      observe({
        print(input$map_marker_dragend)
      })
    

                   
}


shinyApp(ui, server)

In this case I still can move the circles around but I don't know how to get their new coordinates. Any help or suggestion ?

Answer 1

library(shiny)
library(leaflet)
library(tidyverse)

coords_data <- data.frame(id = 1:3, lng = c(2, 30, 50), lat = c(48, 40, 60))

ui = fluidPage(
  leafletOutput('map'),
  tableOutput('coordsTable')
)

server = function(input, output, session){
  
  coords_rv <- reactiveValues(data = coords_data)
  
  output$map <-renderLeaflet({ 
    leaflet()%>%
      addTiles()%>%
      addMarkers(data = coords_data,
                       lng = ~lng, lat = ~lat,
                       layerId = ~id, 
                       options = markerOptions(draggable = TRUE))
  })
  
  
  observeEvent(input$map_marker_dragend, {
    
    markerId <- input$map_marker_dragend$id
    lat <- input$map_marker_dragend$lat
    lng <- input$map_marker_dragend$lng
    
    
    coords_rv$data[coords_rv$data$id == markerId, c("lat", "lng")] <- c(lat, lng)
    
    
    leafletProxy('map') %>% clearMarkers() %>% clearGroup("rad")%>%
      addMarkers(data = coords_rv$data,
                       lng = ~lng, lat = ~lat,
                       layerId = ~id,
                       options = markerOptions(draggable = TRUE))%>%
      addCircles(data = coords_rv$data,
                 lng = ~lng, lat = ~lat,
                 layerId = ~id,radius = 10000,color="red",group = "rad")
  })
  
  
  output$coordsTable <- renderTable({
    coords_rv$data
  })
  
}

shinyApp(ui, server)