STA-4: Historical Maps
This is a simple experiment in generating historical maps: interactive timelines that also map events on a geographical grid.
There is a whole field of Historical GIS which involves a significant set of tools and expertise in cartography and geography. What we’re doing is relatively simple compared to that. We take individual events, write descriptions of them, and assign to them a location (latitude/longitude) and a time (start/end dates). Then we feed that data to a program called Timemap that generates a timeline and a map on which our data are displayed. And we embed those elements - -the map and the timeline – in a web page, where we can add supporting text, images ,and other elements.
This is one tool that can accomplish this sort of task. There are others, and some of them are prettier, but most are harder to use.
Your assignment is to create your own timemap. This time, I don’t want you to make something up entirely on your own, but instead, to use real data that relates in some way to your class project. Here are some ideas:
- Read a novel or short story that relates to your project. Map out 15 or 20 moments in the novel.
- read a secondary source that relates to your project. Map out 15 or 20 events mentioned in the source.
- find 2 or 3 primary sources. Map them in detail on your map.
TO check your work, simply load map-overlay.html (see below) in your favourite browser (which should be either firefox or chrome, please don’t make me angry) using “Open File” (Ctrl-O).
I’ve created a template for you to download here. This is a zipped folder – you will need to uncompress the files and store them in a convenient location on your computer. Ask Google how to do that. You can also inspect the files directly on github, where you can learn all kinds of stuff about version controlled software. I’ve also put up a live running version of the site on the web. It’s just a mirror of what you’ll find at github. The template folder contains the following files:
this is the main HTML file that your project will load. It is pretty well-commented, and contains three parts that you need to think about:
- references to other files and scripts that the project will require.
- a short script that creates the Timemap objects.
- A very small amount of HTML code that mostly serves to contain the Timemap objects.
the display of map-overlay.html is mostly controlled using CSS. We haven’t talked much about this language, but you should still be able to read it a little bit. Hint: search for “map” and “timeline” in the file. You’ll find what you need. You can use this e.g. to change the size or position of the timeline and map elements of the web page. Or, alternatively, you can leave well enough alone and not touch this.
This is an image of an old map (from 1913) that I found here. I edited it slightly (cropped it, rotated it, saved as .gif instead of .jpeg to permit transparency, reduced the quality so it wouldn’t take forever to load), then defined a datapoint in overlay-data.js that creates an “overlay” in the final map. You can replace this file with one of your own if you like, or leave it out altogether. More on overlays below.
Timemap is an open-source project that allows data to be added simultaneously to a timeline and a map. Though very simple compared to proper GIS, it is still fairly powerful and flexible, which leads to a corresponding degree of complexity. If you look closely at the template you will see the function TimeMap.init(), which defines a timemap object. For your project, you will probably keep the structure more or less intact, though you will change some of the particulars. If you want to add new parameters – new values for other variables that affect how the timemap looks and works, you can look at some helpful instructions here or at the full documentation here (probably a little more detail then you want). There are several other helpful links here.
Understanding your data
However, timemap also includes loaders (really, parsers) that translate other data streams into the sort of Javascipt data objects that Timemap can read. So, they take information from other places, and rewrite that information so that it can be fed to a timemap object. Note that we have to include the loader scripts individually in our html file, like this:
So if you decide to use any of the other loaders, please be sure to include the right scripts.
Google Spreadsheet Datasets
- include the google spreadsheet loader for timemap (see above, and the template does this already)
- create a google spreadsheet whose first column includes at least these fields: Start, Lat, Lng, Title, Description
- publish your spreadsheet
- find the spreadsheet key and create a new dataset that uses that spreadsheet as a base
- make sure the dataset is included in your definition of “datasets:” when the timemap is initialized.
Having an authentic historical map is a really fun way to make your map look great online. However, making historical maps sync up with Google maps can be a bit cumbersome, and is really best done with a GIS tool. The process is called Georeferencing, and a professional tool will subtly warp and bend the overlay image to get it to align with the underlying map.
For now, though, if you want to try this, there is a less accurate, rather fincky way to do this that you can try.
- First, find an image; if you are looking for an image of Toronto, the University’s Map Library is a great place to start.
- Next, find an image editor. Phoshop is hat most people use, I use GIMP but then, I run Linux, too.
- Crop the image so that borders, etc, don’t show.
- rotate the image so that it aligns with the north-south contours of a map of your location
- futz endlessly with the north, south, east, and west parameters of your overlay object in overlay-data.js
- ta-da! with luck the overlay will more or less fit the underlying geography. If not… well, that’s another lesson. A starting point for more and better ideas is here.