In the days following the earthquake in Japan, members of the US business community pledged more than $240 million to aid response and recovery efforts. Their challenge was to figure out how to dispense that money to the projects and people who needed it most. To help them visualize the scope of the disaster and identify the areas that were most affected, we worked with the Business Civic Leadership Center to develop an interactive map of the aftershocks felt at more than magnitude 5.0 in the days after the initial 9.0 quake.
if (typeof ts_embed === ‘undefined’) {
document.write(”
“);
ts_embed = true;
}
div.wax-tooltip h3 {color:white}
Interactive maps like this are great for communicating a lot of information quickly and putting information in context — in this case, the impact of an earthquake that happened halfway around the world. With the increasing availability of open data sets and new mapping technologies, it’s now much easier — and cheaper — to build maps like this.
We built this map using the open-source map design studio TileMill, a free tool that we’ve written about before that allows you to create custom maps using your own data, and open data released by the United States Geological Survey.
Below is a walk-through of how we built this map and details on how you can build your own interactive map using open data and TileMill.
Finding the Data
The U.S. Geological Survey publishes data feeds of recent earthquake readings in a variety of formats. The feeds are geocoded so you can plot the epicenters of each report using longitude and latitude coordinates. For this map, we converted the RSS feed of 5.0-plus magnitude earthquakes over seven days to a shapefile and used TileMill to style the data and add interactivity. You could also download the KML feeds and load them into TileMill directly.
In addition to the point-based epicenter data, we used shapefile data of the Shakemap from the initial earthquake, which shows the ground movement and intensity of shaking caused by a seismic event. This layer provides greater context to the impact felt around the epicenter points.
Building the Map
We used TileMill to design the map and apply an interactive “hover” layer, which allows you to show information when you mouse over a point on the map — in this case, the epicenter of an aftershock. Below is a look at the editing interface in TileMill. For more on how interactivity works in TileMill, check out this blog post from Bonnie.
We then rendered the map to MBTiles, which is an open-file format for storing lots of map tiles and interactivity information in one file. MBTiles can be hosted on the web or displayed offline on mobile devices like the iPad. For this map, we used TileStream Hosting to host the map online. It has an embed feature that let us embed the map on an otherwise static HTML page. The embed code is also publicly available, so others can embed your map on their own site. Check out this article on O’Reilly Radar for an example of this in action. You can make your own embed of this map by clicking on “embed” here.
Adding Advanced Interactivity
By default, the interactivity in TileMill lets you select to have a “hover” or “click” style for interactivity. When you embed your map on a webpage, you can override this default behavior with some client-side code. For this site, we added some CSS styles and used JavaScript to build a timeline based on the dates in the overlays of each interactive point.
Now when you hover over a point on the embedded map, instead of the usual popup, the corresponding element in the timeline expands. This lets users see the relationship between time, space and magnitude an in intuitive way. All the code to make this work is available in the page — just “view source” to check it out.
You can download TileMill for free here and find more documentation on how to use it at support.mapbox.com.
Updated 5/19/11: This post was updated to attribute fundraising efforts to the business community at large.