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:
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:
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.
Let´s make a dynamic map for the active cinemas in Amsterdam between the years 1900 and 2006:
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.
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!