1

I have a shinydashboard app with a leaflet map in a box, and an observeEvent function for marker clicks. When a marker is clicked, a data frame variable for that marker is displayed in another box.

This all works, but the problem is that I also have a leaflet.extras addSearchMarker tool for searching the markers. When I search for a marker, the map nicely zooms to that marker, but the marker click event no longer works. It’s as if the leaflet map reference has been lost somehow. Or am I missing something obvious?

Complete code for the shinydashboard app:

library(shiny)
library(shinydashboard)
library(leaflet)
library(leaflet.extras)
library(maps)
library(googlesheets)
library(stringr)
library(htmltools)

fields <- c("instname", "lat", "lon", "url", "logoURL", "info")

# This performs authentication using a stored Google Sheets OAuth token obtained with gs_auth().
gs_auth(token = "googlesheets_token.rds")

table <- "Schools for NEWACC project" # The name of the Google Sheet.
sheet <- gs_title(table)  # Register the Google Sheet.

bounds <- map('state', 
   c('Massachusetts', 'Vermont', 'New Hampshire', 'Maine', 'Rhode Island', 'Connecticut',
     'New Jersey', 'New York', 'Pennsylvania'), 
   fill=TRUE, plot=FALSE)

theTitle <- HTML("Institutions of <a href='http://newacc.wac.colostate.edu' target='_blank'>The Northeast Writing Across the Curriculum Consortium</a>")

header <- dashboardHeader(title = theTitle, titleWidth = 650, disable = FALSE)

sidebar <- dashboardSidebar(disable = TRUE)

body <- dashboardBody(
  # Custom CSS to make the title background area the same color as the rest of the header.
  tags$head(tags$style(HTML('
      .skin-blue .main-header .logo {
      background-color: #3c8dbc;
      }
      .skin-blue .main-header .logo:hover {
      background-color: #3c8dbc;
      }
      '))),
  fluidRow(
  box(leafletOutput("theMap", height = 700), title = "Click a site for more information.", solidHeader = TRUE, status = "info"),
  box(htmlOutput("markerData"), title = "Site Data", solidHeader = TRUE, status = "info", width = 4)
),

fluidRow(
  box("Row 2, Box 1", title = "Placeholder 1", solidHeader = TRUE, status = "info"),
  box("Row 2, Box 2.", title = "Placeholder 2", solidHeader = TRUE, status = "info")
)
)

ui <- dashboardPage(header, sidebar, body, skin = "black")

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

sheetData <- gs_read(sheet)

  # Build an HTML content string.
  sheetData$content <- paste0(
    "<center><img src='", sheetData$logoURL,  "'", " alt='logo'", " height='200' width='300'", "></center>",
    "<br><h3>", sheetData$info, "</h3><br><br>",
    "<a href='", sheetData$url, "' target='_blank'>", "website", "</a>"
  )

output$theMap <- renderLeaflet({
    leaflet(data = sheetData) %>%
    # Center map on the vicinity of Williamstown, Massachusetts.
    setView(-73.262695, 42.740128, zoom = 6) %>% 
    # The following line will restrict the map view to the given coordinates.
    # setMaxBounds( -76.14405,  47.64953, -64.432627, 36.207562) %>% 
    addProviderTiles("CartoDB.Positron", group = "Map") %>%
    addProviderTiles("Esri.WorldImagery", group = "Satellite") %>% 
    addProviderTiles("Esri.WorldShadedRelief", group = "Relief") %>%
    addMarkers(lng = ~lon, lat = ~lat, label = ~instname, group = "Sites", 
       layerId = ~instname) %>%
    addPolygons(data=bounds, group="States", weight=2, fillOpacity = 0) %>%
    addScaleBar(position = "bottomleft") %>%
    addLayersControl(
      position = "bottomleft",
      baseGroups = c("Map", "Satellite", "Relief"),
      overlayGroups = c("Sites", "States"),
      options = layersControlOptions(collapsed = FALSE)
    ) %>% 
    addSearchMarker(targetLayerId = NULL, targetGroup = "Sites",
                    options = searchMarkersOptions(position = "topleft", 
                    textPlaceholder = "Search for a school...", textErr = "Location not found.")) %>% 
    addEasyButton(easyButton(
      icon='fa-globe', title='Zoom to Full Extent',
      onClick=JS("function(btn, map){map.setView([42.740128, -73.262695], 6);}")))
  }) # renderLeaflet

# THIS STOPS WORKING AFTER SEARCHING FOR A SCHOOL WITH addSearchMarker. 
observeEvent(input$theMap_marker_click, {
  id <- input$theMap_marker_click$id
  siteInfo <- sheetData[which(sheetData$instname == id),] 
  output$markerData <- renderText(siteInfo$content)
}) 

} # server

shinyApp(ui, server)
  • 2
    Hi @Richard, it is very difficult to help you without any code. Please provide a minimal example so we can reproduce your error. For some tips on how to do that, see [here](https://stackoverflow.com/questions/48343080/how-to-convert-a-shiny-app-consisting-of-multiple-files-into-an-easily-shareable?noredirect=1&lq=1) – Florian Feb 22 '18 at 15:48
  • Thanks Florian, added code. – Richard Lent Feb 22 '18 at 15:55
  • 1
    It's still not possible to reproduce your error because your data is not accessible. You should create a 'dummy' data and use that in your question. – SymbolixAU Feb 22 '18 at 21:04
  • Same issue for me – Wilcar Jun 11 '18 at 08:41
  • Hi @RichardLent . Can you use a dummy data ? – Wilcar Jun 11 '18 at 09:04
  • 1
    You're describing an open issue on the leaflet.extras project, and I submitted a reproducible example there if anyone would like to see. I believe it's a bug in leaflet.extras https://github.com/bhaskarvk/leaflet.extras/issues/104 – DeanAttali Jun 25 '18 at 06:39

0 Answers0