I was wondering if anyone knew a solution to an issue I'm having in Rshiny. In short, I'm looking to have leaflet-based map markers update the user's current tab. Ideally, my group want users to use the map to navigate between statistics exercises, housed within the tabs (exercises not present in this example).
The idea is that certain building markers are relevant to certain tabs, and the user looks at the map, sees markers, clicks to find out more (with popup), and the tab below changes automatically to match the exercise with the marker.
I've been trying to implement this so that the mouse click on the map marker registers as input for the 'updateTabsetPanel' command, but seem to have hit a brick wall. I have also tried implementing hyperlink/URLs within the popups to redirect the user to the correct tab, but have had no luck there either.
I had read an another example on here that was previously looking to do the same thing, however the person seeking help only provided excerpts from their code, and while I have tried to follow the answers they got, I can't seem to get it to work, making me think that there is perhaps another small issue elsewhere in my code.
I have provided a more in depth working example below, perhaps someone would be kind enough to have a look and suggest a fix, or tell me if what I am asking of Shiny/R is much too complex, and that my time is better spent elsewhere.
Thanks!
**
library(leaflet)
library(shiny)
library(dplyr)
shinyServer(function(input, output, session) {
#I've tried hyperlinking to the tab with an action link/hyperlink
##that would appear in the popup
Popcontent1 <- paste(sep = "<br/>",
actionLink("?url=inTabset/Home", "Learn about A"),
"This would be the First Marker",
"and would update the tabs to a specific tab below")
Popcontent2 <- paste(sep = "<br/>",
actionLink("link_to_tabpanel_B", "Learn about B"),
"This one would also update to another tab")
output$London <- renderLeaflet({
London <- leaflet(options = leafletOptions(zoomControl = FALSE,
minZoom = 16, maxZoom = 16)) %>%
setView(lng = 0.12783, lat =51.50741, zoom = 16)%>%
addTiles(options = providerTileOptions(opacity = 0.45)) %>%
addCircleMarkers(lng=0.12783, lat=51.50741, radius = 13,
opacity = 0.5, color = "#008B45",
popup=Popcontent1)%>% #MarkerHome
addCircleMarkers(lng=0.12774, lat=51.50700, radius = 13,
color = "#48D1CC",popup=Popcontent2) #Marker2
PopTEST <- addCircleMarkers(London, lng=0.12800, lat=51.50650,
color = "#9400D3", popup=Popcontent1) #TestMarker
})
## Attempt at making the markers in the above map interactive.
## Ideally, clicking on the markers above would change the tabs,
## meaning users click on certain building marker and get relevant tab
observe({
event <- input$London_PopTEST_click
updateTabsetPanel(session, "inTabset", selected = event$A)
})
observeEvent(input$switchtab, {
event <- input$London_PopTEST_click
updateTabsetPanel(session, "inTabset", selected = event$A)
})
})
#########UI
shinyUI(fluidPage(
titlePanel("This is the Map"),
leafletOutput("London", width = "100%", height = 600),
br(),
tabsetPanel(id = "inTabset",
tabPanel(title = "Home", id = "Home",
h4("This is the Home Tab"),
br(),
mainPanel(),
fluidRow(
column(12,
p("This would be the introductory tab.")
))),
######################################## Tab A
tabPanel("Tab A", id = "A",
h4("This tab would be the next step"),
br(),
fluidRow(
column(12,
p("This tab would be brought up by the
marker/popup click in the map above.")
))))
))
**
In the ui part you need to change tabPanel("Tab A", id = "A", to tabPanel("Tab A", value= "A",
For the server part I have modified your code to update tabset panel on the link click. I have added an click event for the link and added an observe event for the click.
shinyServer(function(input, output, session) {
#I've tried hyperlinking to the tab with an action link/hyperlink
##that would appear in the popup
Popcontent1 <- paste(sep = "<br/>",
##Here I have added and event which needs to be updated on clicking the link called "link_click"
actionLink("?url=inTabset/Home", "Learn about A", onclick = 'Shiny.onInputChange(\"link_click\", Math.random())'),
"This would be the First Marker",
"and would update the tabs to a specific tab below")
Popcontent2 <- paste(sep = "<br/>",
actionLink("link_to_tabpanel_B", "Learn about B"),
"This one would also update to another tab")
output$London <- renderLeaflet({
London <- leaflet(options = leafletOptions(zoomControl = FALSE,
minZoom = 16, maxZoom = 16)) %>%
setView(lng = 0.12783, lat =51.50741, zoom = 16)%>%
addTiles(options = providerTileOptions(opacity = 0.45)) %>%
addCircleMarkers(lng=0.12783, lat=51.50741, radius = 13,
opacity = 0.5, color = "#008B45",
popup=Popcontent1)%>% #MarkerHome
addCircleMarkers(lng=0.12774, lat=51.50700, radius = 13,
color = "#48D1CC",popup=Popcontent2) #Marker2
PopTEST <- addCircleMarkers(London, lng=0.12800, lat=51.50650,
color = "#9400D3", popup=Popcontent1) #TestMarker
})
#Here I have the observEvent for link_click which updates the tab
observeEvent(input$link_click,{
updateTabsetPanel(session, "inTabset", "A")
})
})
Another way to do it would be use input$MAPID_marker_click event. You can see the same below:
server <- shinyServer(function(input, output, session) {
#I've tried hyperlinking to the tab with an action link/hyperlink
##that would appear in the popup
Popcontent1 <- paste(sep = "<br/>",
actionLink("?url=inTabset/Home", "Learn about A"),
"This would be the First Marker",
"and would update the tabs to a specific tab below")
Popcontent2 <- paste(sep = "<br/>",
actionLink("link_to_tabpanel_B", "Learn about B"),
"This one would also update to another tab")
output$London <- renderLeaflet({
London <- leaflet(options = leafletOptions(zoomControl = FALSE,
minZoom = 16, maxZoom = 16)) %>%
setView(lng = 0.12783, lat =51.50741, zoom = 16)%>%
addTiles(options = providerTileOptions(opacity = 0.45)) %>%
addCircleMarkers(lng=0.12783, lat=51.50741, radius = 13,
opacity = 0.5, color = "#008B45",
popup=Popcontent1)%>% #MarkerHome
addCircleMarkers(lng=0.12774, lat=51.50700, radius = 13,
color = "#48D1CC",popup=Popcontent2) #Marker2
PopTEST <- addCircleMarkers(London, lng=0.12800, lat=51.50650,
color = "#9400D3", popup=Popcontent1) #TestMarker
})
#This is the marker click event
observeEvent(input$London_marker_click,{
updateTabsetPanel(session, "inTabset", "A")
})
})
Hope it helps!