Yu Zhang
Yu Zhang

Reputation: 443

Embed reactively generated URL in shiny

I would like to show in my shiny app a link that directs to the URL generated based on user's input. I don't want to show the full text of the URL. I know the a(href="",label="") function can be used if I know the URL beforehand, but in this case the URL depends on the user's input. The following doesn't work:

ui <- fluidPage(
    titlePanel("Show map of a given state"),
    sidebarLayout(
        sidebarPanel(
            textInput("state", label = "State", value = "CA", placeholder = "California or CA"),
            actionButton("showU","Show map")
        ),
        mainPanel(
            conditionalPanel(
                condition = "input.showU > 0",
                htmlOutput("url"),
                a(href=htmlOutput("url"),"Show in Google Map",target="_blank")
            )
        )
    )
)

server <- function(input, output){
    observeEvent(input$showU,{
    output$url <-renderUI({paste("https://www.google.com/maps/place/", input$state, sep="")})
    })
}

shinyApp(ui,server)

I hope I can click on the "Show in Google Map" and be directed to the URL generated on the fly. Please help me, thank you.

Upvotes: 8

Views: 1824

Answers (3)

Shaun Garnett
Shaun Garnett

Reputation: 1

I used a HTML button for which the url could be generated recursively

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(

   # Application title
   titlePanel("HTML button"),

   # Sidebar with a slider input for number of bins 
   sidebarLayout(
      sidebarPanel(
         sliderInput("bins",
                     "Number of bins:",
                     min = 1,
                     max = 50,
                     value = 30)
      ),

      # Show a plot of the generated distribution
      mainPanel(
         plotOutput("distPlot"),
         HTML(paste0(htmlOutput('url_test')))
      )
   )
)

# Define server logic required to draw a histogram
server <- function(input, output) {

   output$distPlot <- renderPlot({
      # generate bins based on input$bins from ui.R
      x    <- faithful[, 2] 
      bins <- seq(min(x), max(x), length.out = input$bins + 1)

      # draw the histogram with the specified number of bins
      hist(x, breaks = bins, col = 'darkgray', border = 'white')
   })

   output$url_test = renderText({
     paste('<a href=',cultivar_url(),' class="btn btn-default">Go to Google</a>')
   })

   cultivar_url = reactive({
     print('https://www.google.com')
   }) 
}

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

Upvotes: 0

SymbolixAU
SymbolixAU

Reputation: 26248

If this questions is actually about creating reactive URL links, then HubertL's answer is the way to go.

If you want to keep the map and search funciton all self-contained in the shiny, rather than having to open a new link to Google Maps, you can use my googleway package to achieve the same task

library(shiny)
library(googleway)


ui <- fluidPage(
  titlePanel("Show map of a given state"),
  sidebarLayout(
     sidebarPanel(
     ),
    mainPanel(
      google_mapOutput(outputId = "myMap", height = "600px")

    )
  )
)

server <- function(input, output){

  ## you need a valid API key from Google Maps
  ## https://developers.google.com/maps/

  map_key <- "your_map_api_key"

  output$myMap <- renderGoogle_map({
    google_map(key = map_key, search_box = T)
  })

}

shinyApp(ui,server)

enter image description here

Upvotes: 0

HubertL
HubertL

Reputation: 19544

You need to use renderUI together with uiOutput to update UI reactively:

library(shiny)
ui <- fluidPage(
  titlePanel("Show map of a given state"),
  sidebarLayout(
    sidebarPanel(
      textInput("state", label = "State", value = "CA", placeholder = "California or CA"),
      actionButton("showU","Show map")
    ),
    mainPanel(
      conditionalPanel(
        condition = "input.showU > 0",
        uiOutput("url")
      )
    )
  )
)

server <- function(input, output){
  observeEvent(input$showU,{
    output$url <-renderUI(a(href=paste0('https://www.google.com/maps/place/', input$state),"Show in Google Map",target="_blank"))
  })
}

shinyApp(ui,server)

Upvotes: 6

Related Questions