CODEWITHSUNDEEP
rshinyr-leaflet
Stefan
Stefan

Reputation: 209

R shiny dashboard Leaflet pop-up grey background

I am adding a datatable, and this is working well. I have manage to create a popup when clicking on a record. The popup shows a leaflet map, however the background is grey. I can't figure out the reason why.

Furthermore I want to zoom to the location when clicking on a row with lat/lon. Is that possible?

The code I have so far

library(shiny)
library(leaflet)
library(shinyBS)



##############################################################################
# UI Side
##############################################################################

ui <- fluidPage(
    
    DT::dataTableOutput("mydatatable")
    
    
)

##############################################################################
# Server Side
##############################################################################

server <- (function(input, output, session) {
    
    mycars = head(mtcars)
    output$mydatatable = DT::renderDataTable(mycars, selection = 'single',  
                                             rownames = FALSE,
                                             filter = 'top',
                                             options = list(dom = 't'))
    
    
    observeEvent(input$mydatatable_rows_selected,
                 {
                     showModal(modalDialog(
                         title = "You have selected a row!",
                         leaflet() %>% 
                             addProviderTiles(providers$OpenStreetMap)
                     ))
                 })
    
    
    
})


# Run the application 
shinyApp(ui = ui, server = server)

Upvotes: 1

Views: 651

Answers (1)

Jaccar
Jaccar

Reputation: 1844

To make the map show, wrap your leaflet argument in renderLeaflet().

To zoom in on a specific latitude and longitude, use setView(), where you can also add the zoom level. Here I have set it to Paris: 

  observeEvent(input$mydatatable_rows_selected,
               {
                 showModal(modalDialog(
                   title = "You have selected a row!",
                   renderLeaflet(leaflet() %>% 
                                  setView(lng = 2.349014, lat = 48.864716, zoom = 6) %>%
                                   addProviderTiles(providers$OpenStreetMap))
                 ))
               })

EDIT

I've created a fake dataset here that includes the data you are interested in - this is what you should do in future when asking questions if you need certain features included.

Note the addition of a reactive dataset (filtered_data), which basically filters the original dataset (fake_data) to the row number that has been clicked on. This can then be fed into the Leaflet arguments. 

server <- (function(input, output, session) {

  fake_data = data.frame(name = c("Paris", "Sydney"), 
                         longitude = c(2.349014, 151.209900), 
                         latitude = c(48.864716, -33.865143))

  filtered_data <- reactive({fake_data[input$mydatatable_rows_selected, ]})

  output$mydatatable = DT::renderDataTable(fake_data, 
                                           selection = 'single',  
                                           rownames = FALSE,
                                           filter = 'top',
                                           options = list(dom = 't'))

  observeEvent(input$mydatatable_rows_selected,
               {
                 showModal(modalDialog(
                   title = "You have selected a row!",
                   renderLeaflet(leaflet() %>% 
                                  setView(lng = filtered_data()$longitude, 
                                          lat = filtered_data()$latitude, 
                                          zoom = 6) %>%
                                   addProviderTiles(providers$OpenStreetMap))
                 ))
               })

})

Upvotes: 1

Related Questions