{"componentChunkName":"component---src-components-tutorials-js","path":"/tutorials/internal-links-b/","result":{"data":{"markdownRemark":{"html":"

Contents

\n
    \n
  1. Why would I need this?
    2. \n
  2. \n

    How does this app work?

    \n
      \n
    1. Define the tabPanels
      2. \n
    2. Create a dataset
      3. \n
    3. Build the map and create popups
      4. \n
    \n
    3. \n
  3. How do I run the demo?
    4. \n
  4. What's next?
    5. \n
\n\n
\n

This tutorial has been replaced by the shinyLinks tutorial. This post still works, but it will be archived. (03 September 2020)

\n
\n\n

Why would I need this?

\n

In the part 1, we learned about setting up tabPanels and building hyperlinks manually using a javascript function. This is great, but is there anything else we can do with these links? What about putting in a leaflet map?

\n

In this tutorial, we will learn how to create links from a leaflet popup box to a tabPanel. In this example, I created a mini-tourism app of NYC where each point of interest (Central Park Zoo, Guggenheim Museum, and the Natural History Museum) has it's own page.

\n\n

How does the app work?

\n

This demo was built to address this (link tbd) forum post.

\n\n

Define the tabPanels

\n

First, let's create the app.R file. We will define the ui and then the server. We will create four pages (tabPanel) in our ui - a home page and page for each point of interest. We will place the leaflet map on the home page as it will serve as navigation for our app.

\n
# ui\nui <- tagList(\n        # head\n        tags$head(\n                tags$script(src=\"js/index.js\")\n        ),\n\n        # body\n        navbarPage(\n                tabPanel(\"Home\", value=\"home\", leafletOutput(\"map\")),\n                tabPanel(\"Central Park Zoo\", value=\"zoo\"),\n                tabPanel(\"Guggenheim Museum\", value=\"guggenheim\"),\n                tabPanel(\"Natural History Museum\", value=\"history\")\n        )\n)\n\n# server\nserver <- function(input,output){}
\n\n

Create a dataset

\n

Next, we will build dataset that will be used to plot points on a leaflet map. Let's pick a handful of places and pull their coordinates from google maps (straight from the url). We will also create a column hrefValue, which contains the names that will be sent to the value argument and used in the customHref function.

\n
# build data\nmapDF <- data.frame(\n        location=c(\"Central Park Zoo\", \"Guggenheim Museum\", \"Natural History Museum\"),\n        lat=c(40.76780, 40.78292, 40.78133),\n        lng=c(-73.97191,-73.95907, -73.97413),\n        hrefValue=c(\"zoo\",\"guggenheim\",\"history\"),\n        stringsAsFactors=FALSE\n)
\n\n

Build the map and create marker popups

\n

Let's build the leaflet map. The links to other tabs will go into a\nleaflet popup. For the popup argument in addMarkers(), you\nwill need to wrap the target value in paste0(). Leaflet will render\nthis as a url. In the server, our leaflet map would look like this:

\n
server <- function(input,output){\n        \n        # build map\n        output$map <- renderLeaflet({\n                leaflet(data = mapDF) %>%\n                        setView(lat= 40.7752739, lng= -73.9688518, zoom= 14) %>%\n                        addTiles() %>%\n                        addMarkers(\n                                lng = ~lng, \n                                lat = ~lat, \n                                popup = paste0(\n                                        \"Learn more about the \", \n                                        \"<a onclick=\", \"customHref('\", mapDF$hrefValue,\"')>\", \n                                        mapDF$location, \n                                        \"</a>\"\n                                )\n                        )\n        })\n}
\n

Now our app is ready to go. Launch the app and click on the links we setup.

\n\n

How can I run this app?

\n

The source code is available on github. Alternatively, you can run the demo in R using the following code.

\n
# Run in R/Rstudio\ninstall.packages(\"shiny\")\nshiny::runGitHub(repo=\"shinyAppTutorials\",username=\"davidruvolo51\",subdir=\"Internal-Links\")
\n\n

What's next?

\n

Checkout part 3 of this series. In the next tutorial, we will bring everything from part 1 and part 2 and build a demo shiny app that creates links to specific tabs on other shiny pages.

","frontmatter":{"title":"Linking Tabs - Part 2","subtitle":"Creating links to other pages within a leaflet map popup","abstract":"Now that I created custom links, what can I do with them? How about adding them in a leaflet popup?","date":"2018-08-01","updated":"2020-09-03","keywords":["javascript","leaflet"]},"fields":{"readingTime":{"minutes":2.85}}}},"pageContext":{"slug":"/tutorials/internal-links-b/"}},"staticQueryHashes":["63159454"]}