How to Make a StoryMap
by Eleanore Neumann
A storymap is exactly what is sounds like: a digital storytelling tool that pairs text with a map in a progressive narrative that often includes additional multimedia. If you would like to learn how to make one like “Mapping New Hampshire,” follow the steps below. This tutorial is a work is process, so stay tune for more detailed technical information.
1. Choose the right platform for your storymap
Many different storymap tools are now available online, so it is impportant to choose one that is right for your project. You may want to consider whether you want your storymap to be closed source or open source? What functions should the storymap perform? Do you have the programming skills required by some of the more advanced tools (and if not, then you could always learn!)?
Here are a few tools to get you started along with detail how-to guides:
- ArcGIS StoryMap
- Neatline from Scholars’ Lab @ UVA
- StorymapJS from Knightlab @ Northwestern
- Introduction to StoryMap. JMU Digital Communication Consulting. Accessed April 29, 2019.
- “StoryMap JS Tutorial.” Open Media Lab, SUNY. Accessed April 28, 2019.
- “StoryMap JS Tutorial.” Hacking the Humanities. Accessed April 28, 2019.
- “StoryMapJS for Technical Users.” StoryMap. Accessed April 29, 2019.
I had initially planned to use StorymapJS from Kightlab at Nortwestern University because it is open source, easy to use, and had the basic functionality I needed for this particular project. However, as the project developed, I realized that I needed additional functionality that StorymapJS did not offer, such as the ability to span to many locations and sometimes multiple locations within the same paragraph. So I decided to develop my own. If none of those tools suit your needs, then take a look at “Mapping New Hampshire” below!
Mapping New Hampshire
2. Download the files from GitHub
3. Set up GitHub Pages
Follow this guide for setting up your GitHub pages so you can host storymap: “Getting Started with GitHub Pages.” GitHub. Accessed April 29, 2019.
4. Add text to you storymap
Next, you can begin to add text. Here are some tips for effective storytelling.
5. Add locations to your storymap
You can add markers on the map by modifying the html file. Scroll to line 141 to file the variable “path.” To replace a marker or added a new one, simply copy one of the lines starting with “L.marker” and replace the information. The coordinates must be decimal coordinates, which can be found very easily by googling or going to the location’s Wikipedia page and clicking on the coordinates in the upper-right-hand corner of the page. The “.bindToolTip” function assigns a popover with a name to each location, so add the name of your location in quotations marks.
To create locations that will be assigned to specific text, scroll down to the variable “views” on line 200. To replace or add a view, copy one of the lines and replace the information again. Give the view a name that will be easy to associate with that location, insert decimal coordinates, and finally set the zoom level. The lower the number for the zoom level, the more zoomed out; and the higher the zoom level the more zoomed in on the location. For instance, zoom level 4 for the United States shows the entire country, whereas zoom level 10 shows the small town of Brighton, New Hampshire.
Presner, Todd Samuel, David Shepard, and Yoh Kawano. HyperCities: Thick Mapping in the Digital Humanities. MetaLABprojects. Cambridge, Massachusett: Harvard University Press, 2014.
Thank you to Shane Lin from the Scholars’ Lab at the University of Virginia for encouraging me to make my own storymap and for guiding me (holding my hand) through the process. I am grateful to Jeremy Boggs, Brandon Walsh, and Drew MacQueen, all from the Scholars’ Lab, for their kind and patient help.
“Mapping New Hampshire” is licensed under the MIT license. Please use it!