Maps and Timelines: Half Project Update, Half Review
This post, as the rather functional title implies, is partly an update on a current works-in-progress, but really more a discussion of some of the tools I have been using, particularly the Storymap and Timeline from Northwestern University’s Knight Lab. It is working well for my current projects, and I would like to try it out in a class. It has enough out of the box functionality that students could use it with little training, its use of Google Drive tools lends itself to group projects, and the code is open source, so that more advanced students can tinker, tweak, and customize it.
What I love most about it, though, is that it does not seem to be designed with students or academics as its main audience. Especially in the case of the timeline, these are story telling tools aimed at newspapers and other mainstream sources bringing information to the general public.
This made it an ideal candidate for a website I am building for the Boston Middle Passage Port Marker Ceremony this August. The Port Marker Ceremony is part of an international grassroots project to place markers at every Middle Passage port site as a way of making the history of chattel slavery more visible and accessible to the public. Boston will be the first New England site to have both a marker and a ceremony, raising awareness of the role of the slave trade and enslaved labor in the founding of Massachusetts Bay Colony; in the economic, legal, and social development of the region and nation; as well as how this story of seventeenth and eighteenth-century Boston connects to a global history that carries into the present day.
The goal of the site is to both advertise the event and serve as a resource afterwards. The site itself is under construction, but in the meantime, I wanted to share some of the features being built.
Knight lab Timeline JS
I found this tool because I loved the timeline WBUR created for the Whitey Bulger trial. I especially liked how the title page could come from anywhere within the chronology, and I loved that you could browse ahead of your current entry with the overview at the bottom of the page.
It works from a Google spreadsheet, and as long as you do not change the top two rows, you can add a date anywhere in the spreadsheet and it will appear in the correct order. Publishing the spreadsheet results in a nice little embed code, which works well on Wordpress (there's even a plugin), less so on Squarespace.
In Squarespace, I tried the iframe embed code, inline code, adding script to the header, and nothing. Click here to see the current version of the timeline.
Knight Lab StoryMap JS
Because of my infatuation with the timeline, I browsed through other digital tools and came across the StoryMap JS. The final version of the site will eventually have multiple maps, but the first one I wanted to build was based on Boston locations already featured the National Park Services walking tours (which already has a wonderful app).
This tool fit many of the requirements I had for this first map. Given that I am also partly working on research and content for the site, on other committees related to the event, have other research projects not related to this event, am on the job market, and think that sleep is a necessary and wonderful part of each day, I did not code this from the ground up or spend a lot of time experimenting the layout.
Alternative Option 1: Google Maps
With this in mind, I first turned to Google. The few past posts on this site show that I have a soft spot for Google Fusion (see my post on Mary Prince, Olaudah Equiano, or Jane Austen). Google Developer also has some nice APIs for their maps, including customizability, which I am using for the directions to the event. But a much of my preferences for a tool involved how I wanted it to look.
There are many examples of CSS boilerplate out there for altering a Google Map. Google has its own instructions, and CodyHouse has one of my favorite examples using CSS and jQuery. I did play around with the latter option, and it helped me determine the key factors I was looking for in a digital tool.
- As someone working on research and content, not just the design of the site, I wanted an out of the box needed to easily set up, shared, and expanded upon.
- As this there are other people working on content, I wanted it to be fairly intuitive to use, requiring little to no training.
- I wanted it to be interactive, and for that interactivity to be easy to modify by all contributors.
- I wanted it to be pretty.
By “pretty” I envisioned something very like Stamen Design's Toner maps.
Google ticks the “pretty” box, but I found customizing appearances often did not mesh as well as I wanted with making it a collaborative tool. One of the features I like about the Knight Lab map is that the order of locations is easy to change, and for the user, ignore. It is built around the idea of moving through a spatial narrative, which makes sense if your goal is to mirror the experience of a historic walking tour.
Alternative Option 2: Omeka and Neatline
Of course, when you describe my goals that way, it sounds a lot like a job for Omeka’s map tool Neatline. Omeka is a web-publishing platform from the Roy Rosenzweig Center for History and New Media, George Mason University. You add entries that work as objects to be curated on the site. The nature of the object varies greatly: this could be the metadata for a museum object with the site creating a digital gallery or it could be entries of individuals in a database. One of the features that makes Omeka so attractive is that by entering information for an object, you are creating a database of objects that can be exported into other programs.
Neatline is an Omeka plugin that allows you to make annotated maps centered on a narrative structure. One of my favorite projects using this tool is Northeastern University's Our Marathon, which documents oral histories of the 2013 Boston Marathon Bombing.
Choosing Omeka, though, I think depends less on your audience and more on the team creating the content. If this were a purely academic project based around building an archive of objects with the analysis of those objects also being displayed on the site, Omeka is a strong candidate. But for this project, the focus is less on housing an on-going research project than on creating a resource around an upcoming event.
Knight Lab’s StoryMap also offered the inducement of working easily with Wordpress.org. Tom Scheinfeldt has an excellent post comparing Omeka to Wordpress and other alternatives, and there are a lot of good reasons to use it. For me the deciding factor was that my preferences for Omeka only came after multiple presentations, THATCamp breakout sessions, and a day-long workshop. I am confident using it, but I am not the only using this site. Almost all the other contributors were familiar with Wordpress, which I think is easier to use. Telling others who are volunteering their time on a project that is not listed in the main duties of their position to learn a new content management system seemed like an arbitrary exercise in ego. This site might not always be my baby, and it needed to simple for others to maintain or migrate. Wordpress was simply the more sustainable option.
FUTURE CONCERNS
These two tools from Knight Lab are really user friendly, and their code is on github, so you can customize it more to fit your needs (which will probably happen eventually).
I am concerned though with loading speed. Once up, the map and timeline work great, but on some spotty wifi it was problematic. An alternative would be to build a cleaner, less complicated timeline. Yale's Center for British Art's interactive site on Slavery and Portraiture in 18th-Century Atlantic Britain is a great model.
The timeline is also an iframe embed, which is bad for search engines, and proving very finicky on non-Wordpress sites. A simple fix may just put the script in the site rather than link to another source with the iframe.
But overall, I prefer this option. It is with an established DH center, so it should be maintained. If not, the Timeline is easily transferable into forms of php and sql. The map would probably be harder to transfer, but as both of the tools save your data to your Google Drive, as long as you are happy with the dystopia that is Google privacy, you should be fine. I like that we can customize it if necessary and perhaps more importantly, there is little chance of me messing it up aesthetically with poor taste decisions. As someone who started using computers in the 80s and the internet in the 90s, I was initiated into very ugly digital aesthetics. I have almost completely recovered from those dark days (no more frames!), but at some level, I am still the eight year old that thought a Goldenrod background with LimeGreen font was a good display choice to reset my parents' computers at work.
WORKS CITED
Boeri, David. “Whitey Bulger Timeline” WBUR: Bulger on Trial. 11 November 2013. Web. Access Date: 25 November 2014.
CHMN. Omkea.org. George Mason University. Web. Access date 9 December 2014.
Cody House. “Custom Google Map.” CodyHouse.co. 18 June 2014. Web. Access Date: 25 November 2014.
Google Developers. “Customizing Google Maps: Styling the Base Map.” Google Developers. 7 October 2014. Web. Access Date: 25 November 2014.
Knight Lab. StoryMap JS.Northwestern University. Web. Access Date: 25 November 2014.
---------. Timeline JS. Northwestern University. Web. Access Date: 25 November 2014.
NULab, WBUR, et al. Our Marathon: The Boston Bombing Digital Archive & WBUR Oral History Project. Northeastern University. Web. Access date 9 December 2014.
Scheinfeldt, Tom. "Omeka and Its Peers." Omkea.org. 21 September 2010. Web. Access Date: 25 November 2014.
------. FoundHistory.org Web. Access Date: 25 November 2014.
Scholars’ Lab. Neatline.org. University of Virginia Library. Web. Access date 9 December 2014.
Stamen. Toner. CityTracking.Web. Access Date: 25 November 2014.
Yale Center For British Art. “Timeline” Slavery And Portraiture In 18th-Century Atlantic Britain. YCBA. Web. Access date 9 December 2014.