Thematic Maps with Polygon Overlays

I’ve been building several data visualization maps recently for a variety of clients. In each case, the client has been looking for standard thematic choropleth maps where statistics are illustrated by shades of color among the map locations (ie: countries, states, etc). A few years ago we would have done this with Flash. Now though, there are several options for building JavaScript-based thematic maps using platforms like Google Maps or MapBox.

There are generally two approaches to creating thematic maps in HTML5: either create a pre-rendered tile set with all of your location data rendered into the map tiles and load that into a lightweight tile client (such as Modest Maps), or else use a simple base map with colored polygon shapes placed on top. Now, I would strongly encourage using pre-rendered tiles if possible. They’re becoming easy to make (thanks to applications like TileMill), and the performance of the pre-rendered graphics is superb. Polygon overlays are heavy and slow by comparison, although they do offer flexibility for rendering dynamic data sets on the fly using only front-end code. This is particularly useful when your data is frequently changing, or you if have limited access to a site’s technology infrastructure. I’ve ended up going with map polygons a few times recently… and they turned out to be trickier than I would have expected. First off, have a look at some polygon-based map demos that I put together, and feel free to grab their source code for your own use. Also, consider if your requirements are simple enough to just use Google Geocharts (which are easy and free, although not the most attractive or customizable solution).

The first thing you’ll need for a shape-based map is a client that supports polygon overlays, such as Google Maps, Leaflet, or another major platform. Realistically, the platform should natively support multi-polygons (ie: groups of polygons that behave as a single shape, for circumstances such as an archipelago), otherwise you’ll have to do grunt work to track multi-shape countries. Frameworks like Bing Maps and Mapstraction currently do NOT support multi-polygons, therefore they are probably not the best fit for polygon maps. Google Maps is outstanding with its canvas-based overlay renderer, although it now includes that pesky price tag which tarnishes its appeal. Therefore, I’ve found Leaflet to be a superb open-source alternative. While Open Layers is certainly an option, I’ve found its polygon features to be a bit clunky.

Next, you’re going to need polygon point data to draw onto your map. While there are countless sources of polygon data available online, most are formatted as Esri shape files. You’ll probably want Google-encoded polylines or raw point arrays if you’re adding your own shapes to a map using JavaScript. You can find point data for countries and U.S. states here. Note that there are both low and high-res country shapes available: you’ll probably want to detect a user’s browser and provide low-res shapes to older versions of IE so that they don’t choke.

To put the polygons on the map, you’ll need to decode the Google polylines and then add the point arrays to the map. Follow along with this script, and see its working demo here. For applying colors to your map, refer to this function:

You’ll see that the above receives a location’s value and returns a color based on a pre-determined set of range breaks. You can customize those breaks, or hook them into a dynamic data source tailored to a specific data set.

This should get you up and running with a quick-and-dirty thematic map. Good luck and happy visualizing! You can see an implementation of a thematic map built using Google Maps at the Nuclear Materials Security Index. The custom map tooltip seen there is also available within the maps repo.