STA 03: Make a Map

Due Date: 2016-11-08 Tue

In class we made a kind of toy Google Map out of hand-coded HTML, CSS, and Javascript. You will remember it from JSBin and from Github.

Your next assignment builds directly on that exercise and on your existing knowledge of HTML, CSS, and Javascript.


Build a web page that includes a Google Map (complete with markers) as part of a short but substantive historical exploration of a historical topic of interest to you. The final product should meet the following criteria:

You should write a short essay, approximately 500 words (~ 2 pages double-spaced, if we were using word processors) addressing a small, specific historical topic with a spatial history component. That is, the “spatial” element shouldn’t just be an afterthought, but should be at the centre of your analysis. Moreover, your topic should be Toronto-centric – you should choose a neighbourhood or theme that is relevant to the course and especially to the Toronto Region. You should pick something that you (a) know something about already, and (b) are interested in. . The essay should introduce the reader to the topic, and make a not-too-complex argument which, again, highlights the spatial component.

The essay will be written in Markdown, which makes traditional citations a little complicated (Scholarly Markdown solves that problem, but it’s fairly difficult to set up). So please use simple links for your citations; in Markdown, these take the form [I'm an inline-style link]( So, for instance: [Latour, p. 97]( Don’t worry about a bibliography.

Your map should have at least 4 markers. The assignment template uses a for loop to iterate, that is, repeat, a set of actions for a group of markers. See the template for details. Each marker’s info-window contents should contain a brief headline and some explanatory text. Your essay should refer back to the markers, and you are free to refer to your essay in the marker text itself.
As was also the case with our in-class assignment, the bulk of the styling work is accomplished for us by the strapdown.js script that we call at the bottom of the page. Remember that you can use any of several bootswatch themes if you would like to try a different overall look. If you like, you can also customize the CSS further by using the style.css file in the project folder. In fact, I would definitely recommend doing some styling work. Can you, for instance, style the map legend to crate a

Getting your assignment, and handing it in

This assignment is stored on Github. Learning how to deal with the Git system is part of this challenge:

We will discuss Git in class; make sure to be present for this!


Your essay should meet the ordinary criteria for an historical essay: clearly written, providing adequate evidence, minimal spelling and grammatical errors, etc. The relationship between topic and map should not be artificial – the map should serve as an important part of your historical argument or explanation.

Your Map should work – all your markers should display correctly. The initial zoom should be set so that all of your markers are visible, and when I click on those markers the appropriate text should display.

If you change the styling, you should not create a terrible mess!