Screenshot of the 1945 website depicting the site's main world map with pins for student projects.

A History Course Site with Leaflet

I’ve been interested in using digital maps to in history projects for a while now. My first big project on this was Situating Chemistry. This is a research database of places where chemistry has been done. Each site can be linked to related people, documents, chemical processes, industries, etc.

A screen shot of the world map in the Situating Chemistry database featuring data about 18th century Paris
Map of chemical sites in Paris, overlaid onto a map of Paris from 1790. You can interact with this map at situatingchemistry.org/worldmap

I presented on Situating Chemistry at a couple of DH workshops at OU, and eventually convinced Prof. Janet Ward to incorporate a similar project into one of her history courses. This Spring, she taught a course on 1945 focusing on the events at the end of the war and some of the more immediate cultural changes.

For Dr. Ward’s class, each student was asked to complete three assignments:

  1. An analysis of a visual source including a painting or pamphlet or even physical object from 1945
  2. An analysis of a primary textual source from 1945
  3. And an analysis of a secondary history of 1945 or the war more generally

For each of these assignments, the students wrote a blog post on their own, free OU Create blogs.

I built a course hub that collected the students’ posts both in a menu and a map. Dr. Ward picked a map from the David Rumsey Map Collection and I embedded it into a WordPress site using the Leaflet Map plugin. Once the plugin was activated, I set up a home page for the site and then embedded the map using the Leaflet shortcode:

[leaflet-image source="https://1945.oucreate.com/wp-content/uploads/2019/03/8713007.jpg" height=550 width=100%]

This loads the custom map as an image and sets the size of the map in the display. Then I added pins to the map for each of the student’s blog posts:

[leaflet-marker y=0.06400615721940994 x=-0.14913830161094666]
Post Title
Post Text
Post author
Post link
[/leaflet-marker]

The leaflet-marker coordinates tells the system where to put the pin on the map. The Title, text, author, and link appears in the popup when you click on a pin for a given student project. Temidepelayo Ojekunle, the Office of Digital Learning student assistant, scanned the student’s posts for the course and put together a spreadsheet of titles, short summaries, authors, and links. Using the Leaflet-plugin’s tool for finding the coordinates, I then plotted each of the pins and copied over the information from the spreadsheet. The end result is this site:

Screenshot of the 1945 website depicting the site's main world map with pins for student projects.
Screen shot of the 1945 course website showing the pins linking to student projects.

I really like the idea of accessing the content of the site both through the menu and through the map. I’ve been looking for web elements that are more interesting than a list, and I really like how the map draws you in and lets you see the focal clusters of the course.

In the next version of this site, for a future class, I’d like to use a tool like MapTiler to create tiles for the map, so that you don’t lose resolution as you zoom in on sections. I’d also like to get a better understanding of Leaflet’s resources for using and creating pin icons. I might even move out of WordPress and just use straight HTML since the WordPress php heavy and unnecessary for this type of site. I also hand-coded all the Leaflet pins in this project using the short code, but compiling a geo-json from some sort of form would have been far more efficient.

1 comment

  1. Alan Levine

    I love a map interface too. I had a play with Leaflet as a prototype for site where the idea of leadership was represented as a terrain with different destinations to visit, and trails to follow. The original idea is that the points would be generated from WordPress but I started with HTML demos, and learned a but from the Not of This Earth demo https://leafletjs.com/examples/crs-simple/crs-simple.html

    Was fun to learn how to do pins, paths, and layers (the metaphor ended up a bit too complex for the project, sigh) but here are some demos

    http://lab.cogdogblog.com/corrleader/

    And definitely one could shortcut tha manual parts by rendering the map locations as json data, either one of your spreadsheet tricks or generate it via the WordPress API (that was my plan).

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php