An animated and layered map showing some changes through time is a powerful tool when it comes to visualisation. It´s a great way of visualising the interaction of the actors in the creative industry for a given period of time. Let´s take as example this dynamic map from Harm Nijboer that shows the localisation of active painters in the Low Countries between 1500 and 1700:

http://www.vondel.humanities.uva.nl/ecartico/analysis/?task=numbersmap

The size of the dots refers to the number of active painters in that very coordinate, which is quite intuitive. The animation of the page iterates through the years so the user can see how the hot spots are changing through time. Another very interesting feature is the layer menu (down right) where the user can choose between “painters: confirmed/unconfirmed”, “illuminators of maps and prints”, “smiths” and “engravers”.

If you want to build your own dynamic map for your research, there are many free tools and libraries for making dynamic maps, differing in complexity:

MapboxStudio: this software has a beautiful interface, it´s easy to use (for researchers with some basic knowledge of javascript at least), it´s perfect for adding markers and layers to your map and the best of it all: the documentation is rich and understandable.

QGIS: this open source tool offers more possibilities for developing maps but it´s way more complicated to use: definitely for researchers with programming skills.

OpenLayers: this javascript library allows you to build maps with the best animations but it requires advanced javascript skills. The active painters map was developed using this library.

Leaflet: another javascript library that uses OpenStreetMap data, since it´s really easy to use, we are going to make our dynamic map with it.

Let´s make a dynamic map for the active cinemas in Amsterdam between the years 1900 and 2006:

http://rosa.humanities.uva.nl/dynamic_map.html

At the bottom of the page you can find a link for downloading the sample project of this map. The data for this example was extracted from a search on CinemaContext that is available to save as xml file.

The leaflet library uses OpenStreetMap. The main advantage over other maps is its openness and focus on local knowledge. If you are not building a map of Amsterdam, open the “map-demo.js” file and change the line

// Center map and default zoom level

    map.setView([52.3667, 4.9000], 13);

to the coordinates of your city and adjust the zoom level.

We need our geographical data in GeoJSON format (or even better in topoJSON). GeoJSON is a geospatial data interchange format based on JavaScript Object Notation. The most crucial information in the GeoJSON file are the coordinates of the markers we want to set in our map and the time where these markers should appear. In our example, we made a search on the cinema context database which generates a xml file. I extracted the information I needed (the coordinates of the cinema, its name and the years when it was active) and stored it in a CSV file with the help of a python script. Ideally, you should already have your data in CSV format. In our case, the CSV file contains the following information:

id, name, latitude, longitude, time

After having a proper structure that contains all the information we want to show in our map (feel free to add more meta data to your file), we need to convert the CSV to a GeoJSON file. Just use this converter! But please keep the names of the fields “latitude”, “longitude”, “name” and “time”, otherwise it´s not going to work. In our example the GeoJSON file it´s called “playback_data”. Just rename your converted file to this and replace my data with yours in the project. Further, open with a text editor the “dynamic_map.html” file and change the text for the headers according to the description of your map and save it. Now open the “map-demo.js” file and change the values for the variables “start time” and “end time” and also the content name of the time table – ours is called Amsterdam Cinemas -, and save again. Double click on the “dynamic_map.html” file and voilà, your map should get opened in your browser. 

I want to thank WebMapper for inviting me to spend a day at their office. I learnt a lot from them and they show me many interesting possibilities when it comes to building maps, like this wonderful map of the age of the buildings in Amsterdam.

If you want to know more about mapping, there´s a regular meeting in Amsterdam called Maptime. See you there!