Historical maps for journalistic visualizations

Crossposted from http://jplusplus.se/?p=276

I have been missing a framwork for creating map visualisations that span over many years. The problem, of course, is constantly changing political borders and nations. Me and Jens Finnäs eventually started creating one: Thenmap. While still work in progress and full of bugs, it should now be possible to create simple visualizations using it. And simple visualizations is really the only thing it’s supposed to do; We are not trying to create a tool to cater for all your mapping needs here. Thenmap in intended for journalists, who want to visualize data for their story, one angle at a time.

Technically, the map consists of a single SVG fileA that can be colored with css. Here is the unemployment in EU over that past decade:

And the decolonization of the world:

The above map uses the Robinson projection, by the way. That is a step up from the gravely misleading mercator projection used by the major online mapping services (on Google Maps, Finland seems to be about the same size as MaliB). We can easily add more projections to the project. Here is the same visualization on a Mollweide map:

We use Kartograph.py to render the maps, so any of the 27 projections available there can be added to the project.

The controls can be customised, of course. Here are the participants in the Eurovision Song Contest year by year, with custom controls:

This is a different map of Europe than the last one, by the way, this time including Caucasus, and more of Russia and a slice of Grrenland. The projection is Lambert conformal conic, which is good for showing whole continents at this scale. The unemployment map above, on the other hand, used an orthographic projection.

popup-fiWe have linked every nation and territory to their corresponding WikiData id, to make it easy to automatically fetch stuff like capital city, flag, population, coordinates, etc for each nation. By default, name and flag are shown in the tooltip box when you hover (or touch) a nation. When no WikiData id is available (meaning that there is no article in any Wikipedia edition on it), we create one. By using WikiData, rather than a local database of metadata, we also get translations for most nations to all languages with major Wikipedia editions. Wikipedias generally use the principle of least astonishment when naming articles. This works very well for us, as these are the names that are most likely used in mainstream media. When names are missing, or we are unhappy about the name forms, we can override them with local translations, though. Here is a European map in Finnish: www.thenmap.net?map=europe&mlang=fi

popup-hiAnd a map of Africa in Hindi: www.thenmap.net?map=africa&mlang=hi

30 languagesC are available, but only Swedish and English have full coverage.

For each year, the map will obviously show the world at a certain point in time. By default it will show borders etc as they were at the first of July. This can be changed, though, if you want, say, the March the 8th instead: www.thenmap.net?offset=03-08.

Thenmap offers no zooming or panning or the like. These maps are intended for news and such, where there is one story to be told at a time. In most cases you will then want the map that is best suited to illustrate the story you are telling. You can still add a lot of interactivity to you map, switch between data sets, etc, but this is not Open Street Map or Google Maps. By using static maps we also don’t need to put the visitors web browser to work rendering the maps. Hopefully this will make them usable even in low end smartphones. It also allows for heavy caching, as the same set of svg maps are constantly reused.

How to use it

The easiest way to implement Thenmap is by creating a <div> or <section> element with the id ”thenmap”, and then include the following piece of code:
<script src="//thenmap.net/thenmap.js"></script>
Available parameters are listed in the readme-file.

For more options you have to disable autoinit, and load the script like this:
var mymap = Thenmap.init(element,callback);, where callback is the name of a function to call everytime the map is updated. Then you will have access to a few javascript functions to manipulate the map.

Contact us if you want us to implement Thenmap for you. The code is all on Github if you want to play with it yourself, though we will not have a lot of time to offer support for you.


There is a long list of things that need to be improved or fixed on Thenmap already. These are some that have a higher priority than others:

  • Support for older Internet Explorer versions (<= IE8)
  • Hash pattern for disputed territories looks weird in many browsers
  • Some territorial fixes
  • Better looking control panel
  • Improved performance

Some of the things that should be done, though with less priority:

  • Border going back to 1920
  • More accurate flags and nation titles
  • More maps and projections
  • Shorter loading times
  • Functions for easier plotting data on the map
  • Make it easier to customize tooltip

Please let us know if you try Thenmap out!

Edit: @haxpett at Wikimedia Sweden just pointed me at WikiMaps, a project that will try and collect, georeference and publich old maps. That could be a goldmine for tools such as Thenmap.

A Yes, that means that the maps will not work in old versions of Internet Explorer. We are working on that, though. The intention is to provide vml files for browsers that can not display svg files (i.e. IE8 and earlier).

B Finland is really 338,424 km² large, and Mali 1,240,192 km².