11.3 Use Leaflet for mapping - Video Tutorials & Practice Problems

<v Voiceover>Maps are a great</v> way to display information. In fact, they're one of Edward Tufte's favorite data illustrations. There's a java script library called leaflet, which makes it very easy to draw maps of all kinds. Let's load the package by saying library of leaflet. And as a first pass, let's zoom in Alar Manhattan. So we initialize the map by saying leaflet. Pipe that in to add tiles. And we'll put a marker. We do l-n-g for longitude equals -74.009 and lat for latitude equal to 40.7127. This draws us a map and gives us a marker right at New York City's city hall. You can see the richness of this graph. You have all the different streets, you see the parks, you see the ramp for the Brooklyn Bridge, you even have the subways labeled. Really great map. But let's say we want to plot more than one place. I've put up a CSV on my website that lists a bunch of my favorite cities along with their longitudes and latitudes. Let's download that and take a look. Places gets read.table in quotes html://www.jaredlander.com /data/places.csv. Sep equals comma, header equals true, and strings as factors equals false. We'll take a look at that. And we see we have three columns listing the place name, the latitude and the longitude. Let's put that into a map. We initialize the map by saying leaflet of places. And then we need to add the map tiles. We're gonna have it centered at the center of the world and zoomed out all the way to one. So set view at zero comma zero, zoom equals one. This way we see the whole map of the world. And then we'll pipe that into add pop ups, so we can have little markers showing our places. The longitude will be represented by the commas as longitude since we're not hard-coding it but mapping a variable to a column, we say equals tilde longitude. Comma lat equals tilde latitude. And then for the pop up, we say equals tilde place. We run these lines of code. And we get a map of the world with pop ups for some of my favorite cities. We can zoom in using our scroll wheel or the plus and minus. We can pan around, let's come over here to Europe. We have London and Amsterdam fairly close together. And it's a nice way of getting an interactive map. But sometimes you might need to work with shape files or polygons and leaflet allows you to do that as well. Let's go take some data from the maps package to see it in action. So we say library maps and we could draw a crude map of the United States using the map function. Say map, state, and then say fill equals true. And in the plots pane, we get a very shaded in map of the United States. But rather than plotting it, let's just store its data. We say map, states, gets map of state fill equals true, plot equals false, because we just want the information. Let's see what it's storing. Look at the head of the name slot, Alabama, Arizona, Arkansas, California. Look at the head of the x slot. These appear to be x coordinates. And we'll look at the y slot. Those appear to be y coordinates. It is storing the polygons that make up each of the states. Let's go ahead and do that in leaflet. So let's say leaflet data equals map states. And pipe that into add tiles. So what we did was we just plotted a map of the world, 'cause we took a map even though we fed it data, we didn't do anything with that data because adding tiles just goes and takes tiles from a map in web service. Let's say leaflet, data equals map states. Pipe that into add tiles. And pipe that into add polygons. This will go ahead and take the polygons from map states and draw it on leaflet. And since the polygons only has data for around the United States, it is naturally centered and zoomed there. But now each state is the same color. Maps often have states colored differently so let's do that leaflet data equals map states. Pipe that to add tiles. Pipe that to add polygons. And here let's say fill color equals topo.colors 10 alpha equals null. Now each of our states are colored differently, but there's still those thick blue lines, so let's try to get rid of that. Leaflet data equals map states. Pipe that to add tiles. Pipe that to add polygons. Fill color equals topo.colors 10, alpha equals null. And then for the polygons, stroke equals false. And now I drew the map without those thick blue lines and we can zoom in and nicely see each of our states. Leaflet allows for the easy creation of interactive maps and this is a powerful way to display data.