Telling Your Story With StoryMap JS

Earlier on the blog, we talked about ways to create story maps so we’re following that up with a tutorial for one of the options on there, StoryMapJS.

StoryMapJS is a web-hosted program that lets you create interactive maps by adding Google slides and images onto a map layout from OpenStreetMap. More advanced users can overlay their own map using the Gigapixel mode. But today we are keeping it simple and creating a map giving an around the world tour of cookies.

Getting Started:

  1. Click “Make a Story Map” and sign in with your Google account and come up with a snazzy title!

Name your map

2. If you come up with an even snazzier title you can change it by clicking “My Maps” and choosing the map and the settings option.

arrow pointing to My Maps in top left corner and arrow pointint to gear icon on

Finally, remember to save your work. StoryMapJS can get a little confusing and better to be safe than sorry.

Creating Your Title Slide:

Slide editing mode StoryMapJS

This is the title slide editing page but it’s not that different from the page to create your slides for the map. You can write a title — I’ve chosen “Cookies, Biscuits and Other Circular Treats” — in the “Headline” section and either write or paste your writing on the right side. You can  use the “Media” side to upload an image, but you also change the background of the slide itself by clicking Slide Background and uploading an image into StoryMapJS. To see how your map is coming so far you can check it out in the Preview section as seen here:

cookies in a plastic bag as background image of title page

If you’ve ever wondered who makes sure that cookies leftover from library events get eaten, you can thank the brave and dedicated graduate assistants of Scholarly Commons for providing this service.

Don’t want it to say “Start Exploring” for your title page instructions? Don’t worry — you can change that, too! Click Options and check “Yes” for “Call to Action” and add a custom call. This is also where you can change the type of map (such as creating a Gigapixel) and other important features.

Options in StoryMap JS

Creating Your First Map Point 

Click “Add Slide”

We’re going to start this journey off knowing that various versions of cookies originated in the ancient world, with National Geographic, a trusted source, saying the first cookies appeared in Persia during the 7th century (B. Patrick, & J. Thompson, 2009). Since there’s no mural, painting or visual documentation of “The First Cookie” (like there should be for such a historically significant event), I am not using an image here, making this similar to a title slide. However, this time we’re using a location!  If you’re not sure exactly where something happened simply search the country and click on the correct date.

Adding a location on the map

Creating A Map Point With Images and More!

Unlike many types of cookies, we know exactly where chocolate chip cookies were invented and we can even look up coordinates in Google Maps. Specifically, they were invented by Ruth Graves Wakefield and were originally sold in Whitman, Massachusetts at the Toll House Inn, which has since burned down (Michaud, 2013). However, we have an address! Simply search the address on the map and it will place a point on the map approximating that location.

Typing in Whitman MA address in StoryMapJS

Upload media into your slide:

For this slide, I will be using a picture of a chocolate chip cookie in the GA office that I took myself. Since I took the picture myself I am the copyright holder, please take at least a minute to think about copyright law especially if you are using your StoryMap as part of, or in lieu of, an article. Go to the “Media” section and simply paste a link to your photo from your preferred photo cloud storage (make sure it you have the share settings so that it is public) or the source hosting the photo or upload an image from your computer. You can write where the photo comes from in the next box and can add a caption below that.

Uploaded media demo

Sharing Your Work:

Alright, so you’ve told your story through slides and map points. You’ve moved your slides into the order you want by dragging and dropping them on the side bar. You’ve edited your text, attributed your photos to their sources, and are ready to go. Simply hit “Share” in the top right corner and choose whether you want to embed your map on your website or share the link itself. A word of warning, these sites use aspects through Google and may have issues with link rot so make sure to back up your text and images elsewhere as well!

For Further GIS Assistance

If you’re looking for a more in-depth approach to GIS, please contact James Whitacre, our GIS specialist.

Works Cited:
Drop Cookies – Oxford Reference. 2017. 1st ed. Oxford University Press. Accessed April 17. doi:10.1093/acref/9780199313396.013.0166.

Michaud, Jon. 2013. “Sweet Morsels: A History of the Chocolate-Chip Cookie.” The New Yorker. The New Yorker. December 19. http://www.newyorker.com/culture/culture-desk/sweet-morsels-a-history-of-the-chocolate-chip-cookie.

Olver, Lynne. 2017. “Food Timeline: Food History Research Service.” Accessed April 17. http://www.foodtimeline.org/index.html.

Stradley, Linda. 2015. “History Of Cookies, Whats Cooking America.” What’s Cooking America. June 28. https://whatscookingamerica.net/History/CookieHistory.htm.

Sweets. (2009). In B. Patrick, & J. Thompson, An Uncommon History of Common Things. Washington, DC: National Geographic Society. Retrieved from http://proxy2.library.illinois.edu/login?url=http://search.credoreference.com/content/entry/ngeouc/sweets/0?institutionId=386

Toll house cookie. (2014). In J. F. Mariani, The Encyclopedia of American Food and Drink (2nd ed.). London, UK: Bloomsbury. Retrieved from http://proxy2.library.illinois.edu/login?url=http://search.credoreference.com/content/entry/bloomfood/toll_house_cookie/0?institutionId=386