An Act for the Encouragement of Learning.

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:

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

You can find the JavaScript file here, which is based on a storymap jQuery-plugin created by Atle Frenvik Sveen and shared here on GitHub. The html file can be found here.

The JavaScript uses Leaflet, an open-source JavaScript library for interactive maps. There are a number of helpful tutorials for getting startedhere, but they required some technical knowledge.

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.


Kirby, J. “Scholarly Smackdown: StoryMap JS vs. Story Maps.” Commons Knowledge, University of Illinois at Urbana-Champaign (blog). Accessed April 28, 2019.

“Mapping Indigenous LA.” UCLA American Indian Studies Center. Accessed April 28, 2019.

“Mapping the Republic of Letters.” National Endowment for the Humanities (NEH). Accessed April 28, 2019.

Presner, Todd Samuel, David Shepard, and Yoh Kawano. HyperCities: Thick Mapping in the Digital Humanities. MetaLABprojects. Cambridge, Massachusett: Harvard University Press, 2014.

Presner, Todd, David Shepard, and Yoh Kawano. “HyperCities: Thick Mapping in the Digital Humanities.” Accessed April 28, 2019.

“Resources - Tips, Training and Community.” Esri StoryMaps. Accessed April 28, 2019..

Thomas, Mark. “LibGuides: Web-Based Mapping Applications.” Duke University Libraries. Accessed April 28, 2019.


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!