{"id":702,"date":"2015-02-03T15:54:06","date_gmt":"2015-02-03T22:54:06","guid":{"rendered":"http:\/\/homepages.uc.edu\/~yaozo\/wordpress\/?p=702"},"modified":"2015-02-03T15:54:06","modified_gmt":"2015-02-03T22:54:06","slug":"using-r-to-quickly-create-an-interactive-online-map-using-the-leafletr-package","status":"publish","type":"post","link":"https:\/\/zhuoyao.net\/index.php\/2015\/02\/03\/using-r-to-quickly-create-an-interactive-online-map-using-the-leafletr-package\/","title":{"rendered":"Using R to quickly create an interactive online map using the leafletR package"},"content":{"rendered":"
\n
\n

In a recent post (which you can find here<\/a>) we identified the first publish date for all spatial packages listed in the Analysis of Spatial Data Task View<\/a> on the R website. The most recent of these, published in March 2014, is the leafletR<\/code> package by Christian Graul. We were surprised and impressed that, if you have a GeoJSON file, you can create a Leaflet map with a single line of R code. In this post, though, we demonstrate with an end-to-end example starting with a shapefile.<\/p>\n

Introducing Leaflet<\/h2>\n

Leaflet, an open-source JavaScript library for interactive maps, has proven itself to be a viable alternative to the Google Maps API. Developed by Vladimir Agafonkin, Leaflet is relatively easy to work with and has a lot of momentum in the online mapping world and is currently used by a wide variety of institutions (examples listed on the Leaflet website include Flickr, foursquare, craigslist, Data.gov).<\/p>\n

With even a basic web programming background, working with Leaflet is straightforward. The leafletR package, though, is designed to make it particularly easy for R users with limited web programming experience get their maps on the web.<\/p>\n

Get the data<\/h2>\n

For this demonstration we decided to use extremely un-sexy data from the US Census on population by county. We initially load the required libraries, pull the data down from the Census web site and unzip. For this demonstration we will limit to New York State counties.<\/p>\n

Here we download and unzip a shapefile from the US Census.<\/p>\n

library<\/span>(leafletR)\nlibrary<\/span>(rgdal) #for reading\/writing geo files<\/span>\nlibrary<\/span>(rgeos) #for simplification<\/span>\nlibrary<\/span>(sp)\n\n# note that this file is somewhat big so it might take a couple<\/span>\n# of minutes to download<\/span>\nurl<-\"http:\/\/www2.census.gov\/geo\/tiger\/TIGER2010DP1\/County_2010Census_DP1.zip\"<\/span>\ndownloaddir<-\"d:\/Leaflet\"<\/span>\ndestname<-\"tiger.zip\"<\/span>\ndownload.file(url, destname)\nunzip(destname, exdir=downloaddir, junkpaths=TRUE<\/span>)\n<\/code><\/pre>\n
A little clipping and projecting<\/h2>\n
We’ve downloaded and unzipped the file. Now we’re ready to bring the shapefile into R for a little formatting.<\/p>\n
filename<-list.files(downloaddir, pattern=\".shp\"<\/span>, full.names=FALSE<\/span>)\nfilename<-gsub(\".shp\"<\/span>, \"\"<\/span>, filename)\n\n# ----- Read in shapefile (NAD83 coordinate system)<\/span>\n# ----- this is a fairly big shapefile and takes 1 minute to read<\/span>\ndat<-readOGR(downloaddir, filename) \n\n# ----- Create a subset of New York counties<\/span>\nsubdat<-dat[substring(dat$GEOID10, 1<\/span>, 2<\/span>) == \"36\"<\/span>,]\n\n# ----- Transform to EPSG 4326 - WGS84 (required)<\/span>\nsubdat<-spTransform(subdat, CRS(\"+init=epsg:4326\"<\/span>))\n\n# ----- change name of field we will map<\/span>\nnames(subdat)[names(subdat) == \"DP0010001\"<\/span>]<-\"Population\"<\/span>\n<\/code><\/pre>\n
Simplify your shapefile if necessary<\/h2>\n
Many shapefiles we work with have significant detail that results in very large GeoJSON files. Without simplifying this county file ends up as a 3mb GeoJSON file so we will use the rgeos<\/code> library to simplify. Note that in a setting where preserving toplogy really matters I would be more likely to use the tools in QGIS or ArcGIS but for this demonstration we will restrict ourselves to R.<\/p>\n
Note that another option would be to convert the large GeoJSON to TopoJSON<\/a> using Mike Bostock’s node.js module. It is easy to use and dramatically reduces the size of GeoJSON files. Working with a TopoJSON file in Leaflet, though, is not as straightforward. For a discussion you can see this issue<\/a> and this example<\/a>. You can also see an example of TopoJSON in action, linked with charts using D3, at our site here <\/a>.<\/p>\n
# ----- save the data slot<\/span>\nsubdat_data<-subdat@data[,c(\"GEOID10\"<\/span>, \"Population\"<\/span>)]\n\n# ----- simplification yields a SpatialPolygons class<\/span>\nsubdat<-gSimplify(subdat,tol=0.01<\/span>, topologyPreserve=TRUE<\/span>)\n\n# ----- to write to geojson we need a SpatialPolygonsDataFrame<\/span>\nsubdat<-SpatialPolygonsDataFrame(subdat, data=subdat_data)\n<\/code><\/pre>\n
Ready to play with LeafletR<\/h2>\n
With the shapefile in R we are ready to create the GeoJSON file. We will create the cuts we want to map and then create the Leaflet map.<\/p>\n
# ----- Write data to GeoJSON<\/span>\nleafdat<-paste(downloaddir, \"\/\"<\/span>, filename, \".geojson\"<\/span>, sep=\"\"<\/span>) \n\n\nwriteOGR(subdat, leafdat, layer=\"\"<\/span>, driver=\"GeoJSON\"<\/span>)\n\n\n# ----- Create the cuts<\/span>\ncuts<-round(quantile(subdat$Population, probs = seq(0<\/span>, 1<\/span>, 0.20<\/span>), na.rm = FALSE<\/span>), 0<\/span>)\ncuts[1<\/span>]<-0<\/span> # ----- for this example make first cut zero<\/span>\n\n\n# ----- Fields to include in the popup<\/span>\npopup<-c(\"GEOID10\"<\/span>, \"Population\"<\/span>)\n\n\n# ----- Gradulated style based on an attribute<\/span>\nsty<-styleGrad(prop=\"Population\"<\/span>, breaks=cuts, right=FALSE<\/span>, style.par=\"col\"<\/span>,\n               style.val=rev(heat.colors(6<\/span>)), leg=\"Population (2010)\"<\/span>, lwd=1<\/span>)\n\n\n# ----- Create the map and load into browser<\/span>\nmap<-leaflet(data=leafdat, dest=downloaddir, style=sty,\n             title=\"index\"<\/span>, base.map=\"osm\"<\/span>,\n             incl.data=TRUE<\/span>,  popup=popup)\n\n# ----- to look at the map you can use this code<\/span>\nbrowseURL(map)\n<\/code><\/pre>\n
Here the final map<\/h2>\n
You now have an HTML file called index.html that you can upload. We uploaded this particular file to GitHub as a Gist and you can view it here<\/a>.<\/p>\n