Repost - Linking Between Tabs in Shiny (Leaflet)

[Martin Ingram]

** Apologies I think I deleted this by mistake earlier when trying to update it :(

Hi folks, I was wondering if anyone would be able to help out with a small problem in my app? 

 

My group are building an app to teach various aspects of statistics, spread across multiple tabs.

 

Our idea is to use a map using the leaflet package, with markers on certain buildings, which when clicked on provide with a little bit of information about the building and a link to an exercise (housed in one of the tabs). 

 

So far, I have the map working, with markers and popups in place at the top, and tabs/tabpanels underneath.  

 

I'm primarily wondering if there was any way that would realistically alter the hyperlink in the popup, in such a way that it allows the user to change tabs by clicking the link within the popup on the map?

(ideally they would use the map and markers as the primary method of navigation for the app) 

 

One attempt  I'd been trying to use the actionLink function, however it only provides my popups with dead hyperlinks.

 

Popcontent1 <- paste(sep = "<br/>",

                 actionLink("link_to_tabpanel_A", "Learn about A"),

                 "Building A"),

...

 

 

addCircleMarkers(lng=-00.0000, lat=00.00000,

                       popup=Popcontent1)%>%

 

... 

 Ui

tabPanel("A",

                       br(),

                       fluidRow(

                         column(12,

                                     p(),

                                     ))

)

 ... 

I've also tried using the observe  function, in which I was essentially asking shiny to notice the mouse click event on map popup/marker as a command to change tabs, again with no luck. 

observe({

    

   event <- input$map_Popcontent12_click

    updateTabsetPanel(session, "inTabset",

                      selected = event$"A")

  })

... 

Any suggestions would be greatly appreciated :) 

[juegaonl...@gmail.com]

The code provided by David works perfectly but the user arrives at the middle of the destination page instead of the top. To fix this, I included the line "window.scrollTo( 0, 0 );" just after the conditional.

El martes, 7 de marzo de 2017 a las 22:29:12 UTC+1, DCR escribió:

I had the same issue recently. You've probably noticed that the traditional <a> tag doesn't work as shiny generates new hrefs each time your shinyapp runs. A workaround is to target the tab panel name using javascript. I've provided a simple workable example where links to other tabs are included in leaflet popups. In this example, I've chosen a few tourist destinations in New York where each popup contains the link. 

You will need two files: app.R and func.js (adapted from this SO post). The js function loops through all "a" tags to match the input tab name to the target tab, and then sends you there.

func.js

// script for custom href

var customHref = function(tabName) {

    var dropdownList = document.getElementsByTagName("a");

    for (var i = 0; i < dropdownList.length; i++) {

        var link = dropdownList[i];

        if(link.getAttribute("data-value") == tabName) {

            link.click();

        }

    }

};

app.R

# packages

library(shiny)

library(leaflet)

# make df for leaflet

mapDF <- data.frame(

    location = c("Central Park Zoo", "Guggenheim Museum", "Natural History Museum"),

    lat = c(40.7678014, 40.7829208, 40.7813281),

    lng = c(-73.971908, -73.9590684, -73.974125),

    hrefValue = c("zoo", "guggenheim", "history")

)

# ui

ui <- tagList(

    # link js

    tags$head(tags$link(includeScript("func.js"))),

    tags$head(tags$style("a{cursor:pointer;}")),

    # UI

    navbarPage(

        

        title = "Shinyapp",

        tabPanel("Home", 

                 value ="home",

                 titlePanel("Leaflet Example"),

                 h4("Creating hrefs to other shiny tabs"),

                 leafletOutput("map")

        ),

        tabPanel("Central Park Zoo", 

                 value="zoo",

                 titlePanel("Central Park Zoo"),

                 p("...some text here..."),

                 helpText("Would you like to go back? If so click ", 

                          HTML("<a onclick=","customHref('home')" ,">",

                               "here","</a>"))),

        tabPanel("Guggenheim",

                 value="guggenheim",

                 titlePanel("Guggenheim Museum"),

                 p("...some text here..."),

                 helpText("Would you like to go back? If so click ", 

                          HTML("<a onclick=","customHref('home')" ,">",

                               "here","</a>"))),

        tabPanel("Natural History Museum",

                 value="history",

                 titlePanel("Natural History Museum"),

                 p("...some text here..."),

                 helpText("Would you like to go back? If so click ", 

                          HTML("<a onclick=","customHref('home')" ,">",

                               "here","</a>")))

    )

)

# server

server <- function(input, output){

    

    # make map

    output$map <- renderLeaflet({

        

        leaflet(data = mapDF) %>%

            setView(

                lat = 40.7752739, 

                lng = -73.9688518,

                zoom = 14) %>%

            addTiles() %>%

            addMarkers(lng = ~lng , lat = ~lat,

                       popup = paste0(

                           "Learn more about the ",

                           "<a onclick=","customHref('",mapDF$hrefValue,"')>",

                           mapDF$location,

                           "</a>"

                       ))

    })

}

# launch

shinyApp(ui, server)

 I've uploaded the files to github: https://github.com/davidruvolo51/Rutils/tree/master/shinyapps/Internal-Links

Hope that helps!

- David