Include Tables, Images and Graphs in Leaflet Popups

Description

Include Tables, Images and Graphs in Leaflet Popups

Details

Creates HTML strings to embed tables, images or graphs in popups of interactive maps created with packages 'leaflet' or 'mapview'. Handles local paths to images on the file system or remote urls. Handles graphs created with 'base' graphics, 'lattice' or 'ggplot2' as well as interactive plots created with 'htmlwidgets'.

Author(s)

Tim Appelhans, Florian Detsch Maintainer: Tim Appelhans tim.appelhans@gmail.com

Add graph/plot popups to leaflet layers.

Description

Add graph/plot popups to leaflet layers.

Usage

addPopupGraphs(map, graph, group, width = 300, height = 300, ...)

Arguments

Value

A leaflet map.

Examples

if (interactive()) {
library(sf)
library(leaflet)
library(lattice)

pt = data.frame(x = 174.764474, y = -36.877245)
pt = st_as_sf(pt, coords = c("x", "y"), crs = 4326)

p2 = levelplot(t(volcano), col.regions = terrain.colors(100))

leaflet() %>%
  addTiles() %>%
  addCircleMarkers(data = pt, group = "pt") %>%
  addPopupGraphs(list(p2), group = "pt", width = 300, height = 400)

}

Add image popups to leaflet layers.

Description

Add image popups to leaflet layers.

Usage

addPopupImages(
  map,
  image,
  group,
  width = NULL,
  height = NULL,
  tooltip = FALSE,
  ...
)

Arguments

Value

A leaflet map.

Examples

if (interactive()) {
## remote images -----
### one image
library(leaflet)
library(sf)
library(lattice)

pnt = st_as_sf(data.frame(x = 174.764474, y = -36.877245),
                coords = c("x", "y"),
                crs = 4326)

img = "http://bit.ly/1TVwRiR"

leaflet() %>%
  addTiles() %>%
  addCircleMarkers(data = pnt, group = "pnt") %>%
  addPopupImages(img, group = "pnt")

### multiple file (types)
library(sf)
images = c(img,
            "https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg",
            "https://www.r-project.org/logo/Rlogo.png",
            "https://upload.wikimedia.org/wikipedia/commons/d/d6/MeanMonthlyP.gif")

pt4 = data.frame(x = jitter(rep(174.764474, 4), factor = 0.01),
                  y = jitter(rep(-36.877245, 4), factor = 0.01))
pt4 = st_as_sf(pt4, coords = c("x", "y"), crs = 4326)

leaflet() %>%
  addTiles() %>%
  addMarkers(data = pt4, group = "points") %>%
  addPopupImages(images, group = "points", width = 400) # NOTE the gif animation

## local images -----
pnt = st_as_sf(data.frame(x = 174.764474, y = -36.877245),
                coords = c("x", "y"), crs = 4326)
img = system.file("img","Rlogo.png",package="png")
leaflet() %>%
  addTiles() %>%
  addCircleMarkers(data = pnt, group = "pnt") %>%
  addPopupImages(img, group = "pnt")
}

Create HTML strings for popups

Description

Create HTML strings for popup graphs used as input for mapview or leaflet.

Create HTML strings for popup images used as input for mapview or leaflet.

Create HTML strings for popup tables used as input for mapview or leaflet. This optionally allows the user to include only a subset of feature attributes.

Usage

popupGraph(
  graphs,
  type = c("png", "svg", "html"),
  width = 300,
  height = 300,
  ...
)

popupImage(img, src = c("local", "remote"), embed = FALSE, ...)

popupTable(x, zcol, row.numbers = TRUE, feature.id = TRUE, className = NULL)

Arguments

Details

Type svg uses native svg encoding via readLines. height and width are set via ... and passed on to svg
Type png embeds via "<img src = ...". height and width are set via ... and passed on to png
Type html embeds via "<iframe src = ...". height and width are set directly in pixels.

Value

A list of HTML strings required to create popup graphs.

A list of HTML strings required to create popup graphs.

A list of HTML strings required to create feature popup tables.

Examples

if (interactive()) {
### example: svg -----

library(sp)
library(lattice)

data(meuse)
coordinates(meuse) = ~ x + y
proj4string(meuse) = CRS("+init=epsg:28992")
meuse = spTransform(meuse, CRS("+init=epsg:4326"))

## create plots with points colored according to feature id
library(lattice)
p = xyplot(copper ~ cadmium, data = meuse@data, col = "grey")
p = mget(rep("p", length(meuse)))

clr = rep("grey", length(meuse))
p = lapply(1:length(p), function(i) {
  clr[i] = "red"
  update(p[[i]], col = clr)
})

leaflet() %>%
  addTiles() %>%
  addCircleMarkers(data = meuse, popup = popupGraph(p, type = "svg"))

### example: png -----
pt = data.frame(x = 174.764474, y = -36.877245)

coordinates(pt) = ~ x + y
proj4string(pt) = "+init=epsg:4326"

p2 = levelplot(t(volcano), col.regions = terrain.colors(100))

leaflet() %>%
  addTiles() %>%
  addCircleMarkers(data = pt, popup = popupGraph(p2, width = 300, height = 400))

### example: html -----
leaflet() %>%
  addTiles() %>%
  addCircleMarkers(
    data = breweries91[1, ],
    popup = popupGraph(
      leaflet() %>%
        addProviderTiles("Esri.WorldImagery") %>%
        addMarkers(data = breweries91[1, ],
                   popup = popupTable(breweries91[1, ])),
     type = "html"
    )
  )

}

if (interactive()) {
## remote images -----
### one image
library(sf)

pnt = st_as_sf(data.frame(x = 174.764474, y = -36.877245),
                coords = c("x", "y"),
                crs = 4326)

img = "http://bit.ly/1TVwRiR"

leaflet() %>%
  addTiles() %>%
  addCircleMarkers(data = pnt, popup = popupImage(img, src = "remote"))

### multiple file (types)
library(sp)
images = c(img,
            "https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg",
            "https://www.r-project.org/logo/Rlogo.png",
            "https://upload.wikimedia.org/wikipedia/commons/d/d6/MeanMonthlyP.gif")

pt4 = data.frame(x = jitter(rep(174.764474, 4), factor = 0.01),
                  y = jitter(rep(-36.877245, 4), factor = 0.01))
coordinates(pt4) = ~ x + y
proj4string(pt4) = "+init=epsg:4326"

leaflet() %>%
  addTiles() %>%
  addMarkers(data = pt4, popup = popupImage(images)) # NOTE the gif animation

## local images -----
pnt = st_as_sf(data.frame(x = 174.764474, y = -36.877245),
                coords = c("x", "y"), crs = 4326)
img = system.file("img","Rlogo.png",package="png")
leaflet() %>%
  addTiles() %>%
  addCircleMarkers(data = pnt, popup = popupImage(img))
}

library(leaflet)

leaflet() %>% addTiles() %>% addCircleMarkers(data = breweries91)

leaflet() %>%
  addTiles() %>%
  addCircleMarkers(data = breweries91,
                   popup = popupTable(breweries91))

leaflet() %>%
  addTiles() %>%
  addCircleMarkers(data = breweries91,
                   popup = popupTable(breweries91,
                                      zcol = c("brewery", "zipcode", "village"),
                                      feature.id = FALSE,
                                      row.numbers = FALSE))

## using a custom css to style the table
className = "my-popup"

css = list(
  "background" = "#ff00ff"
)

css = list(css)
names(css) = sprintf("table.%s", className)

evenodd = list("#ffff00", "#00ffff")
names(evenodd) = rep("background", 2)

evenodd = lapply(evenodd, function(i) {
  list("background" = i)
})

names(evenodd) = c(
  sprintf("table.%s tr:nth-child(even)", className)
  , sprintf("table.%s tr:nth-child(odd)", className)
)

lst = append(css, evenodd)

jnk = Map(function(...) do.call(htmltools::css, ...), lst)

dir = tempfile()
dir.create(dir)
fl = file.path(dir, "myCSS.css")

cat(
  sprintf(
    "%s{ \n  %s\n}\n\n"
    , names(jnk)
    , jnk
  )
  , sep = ""
  , file = fl
)

mymap = leaflet() %>%
  addTiles() %>%
  addCircleMarkers(data = breweries91,
                   popup = popupTable(breweries91, className = className))

addMyCSSDependency = function() {
  list(
    htmltools::htmlDependency(
      name = "mycss"
      , version = "0.0.1"
      , src = dir
      , stylesheet = basename(fl)
    )
  )
}

mymap$dependencies = c(
  mymap$dependencies
  , addMyCSSDependency()
)

mymap