Customizing leaflet popup in R

Question

I am using RStudio to create a choropleth leaflet map. I have Country and Url as an attribute in the shapefile that I imported to R.

I wish to show the Country name and URL as a hyperlink within the popup of the final map.

Below is the code I have used so far:

m <- world_shapefiles %>%
  leaflet() %>%
  addProviderTiles(providers$Esri.WorldStreetMap) %>%      
  addPolygons( 
      label=~country, 
            labelOptions = labelOptions(style = list("font-weight" = "normal", padding = "3px 8px", textsize = "15px",
direction = "auto")), 
              popup = ~ paste("Country:", country, "<br/>","<b/>","URL:", url)
)

I want to see the text "Click here" instead of the entire url in the popup, I tried using the below code with no luck.

popup = ~ paste("Country:", counry, "<br/>","<b/>","URL:", "<b><a href=url>Click Here</a></b>")

Do you have any ideas on how to achieve it?

Pitta

Answer 1

Overview

After reading R, leaflet package, Passing a character vector of HTML tags to popups?, here's how you would modify your existing code:

# it seems ~ doesn't work inside of the paste0() function
# which is why I accessed the variables through the $
popup = paste0( "Country:"
                 , world_shapefiles$country 
                 , "<br>"
                 , "<a href='"
                 , world_shapefiles$url
                 , "' target='_blank'>"
                 , "Click Here</a>"
               )

Reproducible Example

I use the World Borders Data Set to download shapefiles for each country in the world. I then add a Wikipedia URL for each country in the data set.

# load necessary packages
library( leaflet )
library( sf )

# download zip file
download.file(
  url = "http://thematicmapping.org/downloads/TM_WORLD_BORDERS-0.3.zip"
  , destfile = "TM_WORLD_BORDERS-0.3.zip"
)

# unzip 
unzip( zipfile = "TM_WORLD_BORDERS-0.3.zip" )

# transfrom to sf
world.borders <-
  read_sf( dsn = getwd()
           , layer = "TM_WORLD_BORDERS-0.3" )

# add the wikipedia page for each country
world.borders$wiki <-
  paste0( "https://en.wikipedia.org/wiki/", world.borders$NAME )

# make leaflet map
my.map <-
  leaflet( options = leafletOptions( minZoom = 2 ) ) %>%
  setMaxBounds( lng1 = -180
                , lat1 = -89.98155760646617
                , lng2 = 180
                , lat2 = 89.99346179538875 ) %>%
  addTiles( urlTemplate = "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}" ) %>%
  addPolygons( data = world.borders
               , fill = "#D24618"
               , color = "#D24618"
               , opacity = 0.5
               , fillOpacity = 0.01
               , weight = 3
               , popup = paste0(
                 "<b>Country: </b>"
                 , world.borders$NAME
                 , "<br>"
                 , "<a href='"
                 , world.borders$wiki
                 , "' target='_blank'>"
                 , "Click Here to View Wiki</a>"
               )
               , label = ~NAME
               , labelOptions = labelOptions(
                 style = list("font-weight" = "normal"
                              , padding = "3px 8px"
                              , textsize = "15px"
                              , direction = "auto" ) )
               , highlightOptions = highlightOptions( 
                 color = "#10539A"
                 , weight = 3
                 , fillColor = NA
               ))

# display map
my.map

# end of script #

Contain

The labelOptions style list needs to be formatted 'code' labelOptions(style = list("font-weight" = "normal", "padding" = "3px 8px", "font-size" = "42px", "direction" = "auto" )), – Gamages