Last week all the #rstatsosphere see a beautiful swiss map from Timo Grossenbacher using just ggplot2. Now is the turn of highcharter because all can be better with a bit of interactivity.
Create the raw map is straightforward. The main challege was replicate the relief feature of the orignal map. This took some days to figure how add the backgound image. I did almost lost the hope but you know, new year, so I tried a little more and it was possible :):
First I searched a way to transform the tif image to geojson. I wrote a mail @frzambra a geoRexpert :D. and he kindly said me that I was wrong. And he was right. NEXT!
I tried with use divBackgroundImage but with this the image use all the container… so… NEXT.
Finally surfing in the web I met plotBackgroundImage argument in highcharts which is uesd to put and image only in plot container (inside de axis) and it works nicely. It was necessary hack the image using the preserveAspectRatio (html world) to center the image but nothing magical.
Code
urlimage<-"https://raw.githubusercontent.com/jbkunst/r-posts/master/061-beautiful-thematic-maps-with-ggplot2-highcharter-version/02-relief-georef-clipped-resampled.jpg"hc<-highchart(type ="map")%>%# data parthc_add_series( mapData =map, data =data, type ="map", joinBy =c("BFS_ID", "bfs_id"), value ="value", borderWidth =0)%>%hc_colorAxis(dataClasses =color_classes(brks, colors))%>%# functionalityhc_tooltip( headerFormat ="", pointFormat ="{point.name}: {point.value}", valueDecimals =2)%>%hc_legend( align ="right", verticalAlign ="bottom", layout ="vertical", floating =TRUE)%>%hc_mapNavigation(enabled =FALSE)%>%# if TRUE to zoom the relief image dont zoom.# infohc_title(text ="Switzerland's regional demographics")%>%hc_subtitle(text ="Average age in Swiss municipalities, 2015")%>%hc_credits( enabled =TRUE, text ="Map CC-BY-SA; Author: Joshua Kunst (@jbkunst) based mostly on Timo Grossenbacher (@grssnbchr) work, Geometries: ThemaKart, BFS; Data: BFS, 2016; Relief: swisstopo, 2016")%>%# stylehc_chart( plotBackgroundImage =urlimage, backgroundColor ="transparent", events =list( load =JS("function(){ $(\"image\")[0].setAttribute('preserveAspectRatio', 'xMidYMid') }")))hc