svgPanZoom htmlwidget gets hammer.js touch support

svgPanZoom adds touch support with hammer.js thanks to the helpful example from Anders Riutta. To test it out, I just had to try the new graticule (CRAN).

Try it on your mobile

So go ahead and try it on your mobile device. Let me know if it doesn't work.

live example

library(svgPanZoom)
library(SVGAnnotation)
library(XML)

library(raster)
library(graticule)
library(rgdal)
tfile <- system.file("extdata",  "nt_20140320_f17_v01_s.bin", package = "graticule")
ice <- raster(tfile)

meridians <- seq(-180, 160, by = 20)
parallels <- c(-80, -73.77, -68, -55, -45)
mlim <- c(-180, 180)
plim <- c(-88, -50)
grat <- graticule(lons = meridians, lats = parallels, xlim = mlim, ylim = plim, proj = projection(ice))
labs <- graticule_labels(meridians, parallels, xline = -45, yline = -60, proj = projection(ice))

svg <- svgPlot({
    plot(ice, axes = FALSE)
    plot(grat, add = TRUE, lty = 3)
    text(labs, lab = parse(text= labs$lab), col= c("firebrick", "darkblue")[labs$islon + 1], cex = 0.85)
    title(sprintf("Sea ice concentration %s", gsub(".bin", "", basename(tfile))), cex.main = 0.8)
    title(sub = projection(ice), cex.sub = 0.6)
  }
  , height = 8
  , width = 8
)

### feel free to skip this next little bit
###   to restrict the zoom to just the graticule/map portion of the svg
# get the map elements
mapel <- getNodeSet(
  svg
  , "//*[@clip-path = 'url(#clip1)' or @clip-path = 'url(#clip5)']" 
)

# create a new zoom container to hold the map elements

zoom_g <- newXMLNode(
  "g"
  , attrs = c("class"="map_viewport")
)

zoom_container <- newXMLNode(
  "g"
  ,attrs = c("clip-path" = "url(#clip1)", "clip-rule" = "nonzero")
  ,.children = zoom_g 
)

replaceNodes( mapel[[1]], zoom_container )
addChildren( zoom_g, mapel )


svgPanZoom(
  svg
  ,controlIconsEnabled = TRUE
  ,viewportSelector = ".map_viewport"
  ,center = FALSE
  ,height = 500
  ,width = 700
)