Mapping data on the web using Mapbox & OpenLayers

This post is mostly a note to myself covering some of the research I’ve been doing over the past day with mapping data for the web. I’ve found a number of really nice interactive mapping tools that I’m looking into including Mapbox, OpenLayers, Polymaps and Google Maps API. Although they look nice, I’ve been avoiding Flash based tools. Mostly because I don’t know Actionscript and also because I think html5/javascript is where technology is headed in the near future.

Background

Over the past two years, the Global Ocean Economics Project that I’ve been working for has generated/collected some interesting global data. The data is organized very simply into a longitudinal format with countries as the cross-sectional identifier. The head of this data would look something like this:

For now I’ll ignore the time element of the data and focus simply on displaying a cross-section on a global map. I’ll consider displaying time-series on the map later.

Mapbox
This appears to be a strong contender for my final product although it appears to be geared towards an audience a little higher in terms of technical efficiency.

I was first tipped off to Mapbox after falling for the data displays on the new World Bank data site. The map on the front page gets its message across while remaining very clean and simple. After looking at this page’s source code I saw that they called scripts from mapbox.com so I checked it out and after reading a little on that site I was able to produce this:

The code necessary to use the World Light tileset above can be downloaded here. Also at that link are instructions for working with Drupal and Google Maps API.

The next step is to add data and make it look more like this app from the National Democratic Institute.

OpenLayers
OpenLayers is an open source javascript library for making ‘slippy’ maps. I believe it is the brawn behind Mapbox, however, the documentation is a little vague for my liking and it will take some more time before I can comment on this further.

Polymaps
This looks to be very nice. Good set of examples and the documentation seems useful. It’s also nice to see that they are dedicated to using SVG, which will likely be very useful in the future of the web. As a user of Inkscape, I’m happy to see more support for SVG on the web. For the time being I’ve decided not to pursue Polymaps any further because I fear hitting some walls in terms of SVG being incompatible with some browsers (I’m looking at you IE6!).

Google Maps API
Why leave Google to last? Normally the GOOG would be the first place I look, but I was under the impression that Google Maps was Flash only. Turns out that I was prematurely turned off since they do have non-flash version, however, at the moment I feel that I’ve made more headway with other options so I’ll stick to that.

future research
At the moment all the data files are static so there is no need to concern myself with connecting the map to an analysis engine like Stata (or R via Rapache). However, in the future I’d like to investigate how to make such interactive maps dynamic in that they take output from Stata scripts and plot them on the web. This could be done automatically to do something like:

1. Download monthly crime data
2. Run some regressions
3. Report the results on an interactive map

Done for now
Like I said earlier, this is mostly a note to myself to collect some links and my progress researching this topic. But, if you happen to read all the way through this and have any comments or can suggest a new direction for me to take, please do so below.