As Will announced yesterday, TileMill now supports interactive popups, which are displayed when a user hovers over or clicks on the map's features. When we started working on interactivity for TileMill, I wanted to make a map that would show how easy it can be to take a spreadsheet with some addresses and information about each location and turn it into a fully interactive web map. My goal was to do this with as little programming or advanced software as possible. Here’s what I came up with:
Map of projects funding by the Recovery Act last quarter.
Here’s what’s exciting about this map: there are thousands of interactive points that load as fast as you can drag your mouse! This makes it possible to scour across the map, performing a virtual survey of all of the work being funded by the government in the last quarter to reinvest in the American economy.
Making the Map
I posted a step-by-step walk through of how this map was made on Support.MapBox.com. In this post, I’ll break down the problem and show what a project like this entails. The main steps are as follows:
- Find a good source of data for your map and add coordinates to your data for each address.
- Convert the spreadsheet to a geospatial format for use in TileMill.
- Style and add interactivity for mouse-over and click.
For data I turned to the U.S. government’s online clearinghouse for data on the Recovery Act, Recovery.gov, where I found a spreadsheet of all contracts from the fourth quarter of last year. This file covers over 50,000 projects, and it includes general information like each project’s name and description and specific details like its funding amount, start date, jobs it has created, and what government agency is funding the work, to name just a few.
I loaded the spreadsheet using the free open-source data processing tool Google Refine. More information about installing and using Refine is provided in detail in the walk through. With Refine, I retrieved coordinates for each address using the Yahoo PlaceFinder geocoding service. Having a longitude and latitude value for each address means the data is ready to be used on a map. Finally, I used Refine’s templating feature to save the spreadsheet as a GeoJSON file.
Next, I loaded the GeoJSON file into a new TileMill project and added a few simple styling rules to size the markers over each project based on its total amount of funding. (For more information on styling points on a map, check out this in-depth article.) Now I’m ready for the fun part: interactivity.
I want viewers of this map to get two things from it: 1) A quick survey of the projects going on across the country, and 2) A deeper look at specific projects. So I added a popup to the markers for each project that lists the project’s title and description. Some of the data is messy, so some projects don’t have descriptions or have ones that aren’t very useful.
Next, I added a simple list of key attributes to each project that shows up when a user clicks on a project marker. This lets users see when the project was started, its status, what jobs it’s creating, how much it’s being funded, and by which agency.
Since I want to layer this map on top of a free baselayer from MapBox.com, I deleted the default world shapefile and styles that come with each new TileMill project, giving me a transparent layer of data points.
Finally, I exported the map down to zoom level 10 as an MBTiles file. All the interactivity I built into the map will be saved into the MBTiles file and will be used by web maps served through TileStream or soon, on the MapBox iPad app.
Hosting the Map
The fastest way to serve a custom MBTiles map is to drop it onto a TileStream Hosting account. That’s what I did with my file of Recovery contracts. Now I can use TileStream Hosting’s Map Maker to make an embeddable web map that layers this file on top of the World Light tileset, which I downloaded from MapBox. To generate your own embed code, check out this map on Tile Stream Hosting.
Telling Complex Stories with Maps
TileMill makes it really easy to create completely custom maps for use on the web or mobile. Now these maps support advanced interactivity without using Flash or external plug-ins. And that interactivity scales to thousands of points—far beyond what is possible with most other web mapping platforms. But this is about much more than just better technology.
At Development Seed, we help organizations in the non-profit, government, and private sectors leverage their data to tell complex stories with maps. Maps are powerful. They show us the distribution of information across regions both familiar and foreign, and they help contextualize otherwise esoteric data. Listing thousands of Recovery Act projects may seem abstract or overwhelming until you see a few dozen within miles of your home. Now with interactive maps, we can make that impact even more meaningful by showing additional layers of information. Those dozens of projects suddenly reveal total dollars invested and jobs supported in our neighborhoods.
We’re really excited to see how people are able to use this new development in their own applications. Let us know how you end up using interactivity and what other support documentation we may provide to help you make your maps tell complex stories.