Popups

Popups are small boxes containing arbitrary HTML, that point to a specific point on the map.

Use the addPopups() function to add standalone popup to the map.

content <- paste(sep = "<br/>",
  "<b><a href='http://www.samurainoodle.com'>Samurai Noodle</a></b>",
  "606 5th Ave. S",
  "Seattle, WA 98138"
)

leaflet() %>% addTiles() %>%
  addPopups(-122.327298, 47.597131, content,
    options = popupOptions(closeButton = FALSE)
  )

A common use for popups is to have them appear when markers or shapes are clicked. Marker and shape functions in the Leaflet package take a popup argument, where you can pass in HTML to easily attach a simple popup.

library(htmltools)

df <- read.csv(textConnection(
"Name,Lat,Long
Samurai Noodle,47.597131,-122.327298
Kukai Ramen,47.6154,-122.327157
Tsukushinbo,47.59987,-122.326726"
))

leaflet(df) %>% addTiles() %>%
  addMarkers(~Long, ~Lat, popup = ~htmlEscape(Name))

In the preceding example, htmltools::htmlEscape was used to santize any characters in the name that might be interpreted as HTML. While it wasn’t necessary for this example (as the restaurant names contained no HTML markup), doing so is important in any situation where the data may come from a file or database, or from the user.

In addition to markers you can also add popups on shapes like lines, circles and other polygons.

Labels

A label is a textual or HTML content that can attached to markers and shapes to be always displayed or displayed on mouse over. Unlike popups you don’t need to click a marker/polygon for the label to be shown.

library(htmltools)

df <- read.csv(textConnection(
"Name,Lat,Long
Samurai Noodle,47.597131,-122.327298
Kukai Ramen,47.6154,-122.327157
Tsukushinbo,47.59987,-122.326726"))

leaflet(df) %>% addTiles() %>%
  addMarkers(~Long, ~Lat, label = ~htmlEscape(Name))

# Change Text Size and text Only and also a custom CSS
leaflet() %>% addTiles() %>% setView(-118.456554,34.09,13) %>%
  addMarkers(
    lng=-118.456554, lat=34.07,
    label='Default Label',
    labelOptions = labelOptions(noHide = T)) %>%
  addMarkers(
    lng=-118.456554, lat=34.085,
    label='Label w/o surrounding box',
    labelOptions = labelOptions(noHide = T, textOnly = TRUE)) %>%
  addMarkers(
    lng=-118.456554, lat=34.095,
    label='label w/ textsize 15px',
    labelOptions = labelOptions(noHide = T, textsize='15px')) %>%
  addMarkers(
    lng=-118.456554, lat=34.11,
    label='Label w/ custom CSS style',
    labelOptions = labelOptions(noHide = T, textOnly = FALSE,
                                style=list(
                                  'color'='red',
                                  'font-family'= 'serif',
                                  'font-style'= 'italic',
                                  'box-shadow' = '3px 3px rgba(0,0,0,0.25)',
                                  'font-size' = '12px',
                                  'border-color' = 'rgba(0,0,0,0.5)'
                                  )))