Mapping Global Competitiveness with Mapbox
Each year, the brilliant folk at the World Economic Forum (WEF) create a Global Competitiveness Index "providing insight into the drivers of their productivity and prosperity". This post tells how we built them a map visualisation of the Index, which has featured on the Guardian, Economist, LA Times, Chicago Tribune and more.
The map is an engaging way into the Global Competitiveness Index. Designed to be embedded, it will automatically centre itself on your country of location. We built it as part of a programme, we are working on with WEF, to help drive links and traffic to the Global Competitiveness Report - and it is doing just that.
And it will carry on delivering. As Fernando Zarur, Associate Director of Digital Content at WEF, puts it:
"This sort of content is a way to explore the long-tail potential of our publications, working as channels of continuous interaction that can be maintained and updated year after year, extend sharing, benefitting SEO and hopefully making our different web channels grow in relevance."
The visualisation uses mapping services from Mapbox.com and some custom code largely reliant on Mustache.
Mapbox.com provided the key ingredients:
- Tilemill: a desktop application for creating and styling map tiles and merging geo-spacial data
- Mapbox hosting: a worldwide network of servers which serve up your tiles from the nearest data centre to your users
- Mapbox.js: a javascript library for adding the maps to your html and adding the fancy bells and whistles
Tilemill is the real story here. It's a powerful tool used to add layers of data to a map of the world. Tilemill comes with some well-featured examples, but without your own dataset of points/shapes to display, its purpose is less clear.
Your data has to be provided in some specific formats (SQLite, PostGIS or Shape files) which require some work in themselves, but these can also be generated by other freely available third party tools. We used the country boundary lines shape files provided free by Natural Earth and combined the Competitiveness data from WEF using QGIS, a cross-platform desktop cartography program.
Once the data is imported, you can completely customise the visual style using CartoCSS, a language with a syntax closely resembling LESSCSS, in which individual points, countries, cities, streets, their labels etc can be customised to suit your preferred colour scheme. Using just a handful of lines of CartoCSS, we colour coded each of the countries based on it's rank in the Competitiveness Index.
Our custom code uses the Mustache templating language to display the raw Competitiveness data in a popup when you click on one of the countries.
Mapbox also curate some other projects we had less time to play with which are worth further investigation:
- The MBTiles specification: a standard for graphical tile and data storage in SQLite databases,
- Wax: a javascript "gateway" providing a standard way to add functionality and features provided by other third party Javascript map libraries, to maps from sources such as google, openstreetmap etc as well as mapbox.com themselves.
