StoryMapJS: Maps that Tell Stories

StoryMapJS is a “free tool to help you tell stories on the web that highlight the locations of a series of events.” It is part of the larger suite of KnightLab tools, and offers an easy-to-learn interface to build attractive, interactive presentations. A completed StoryMap will take you through a narrative that links text and media to locations on a map. Rather than simply clicking through points on a map, the tool is designed to create a narrative flow by clicking on an arrow to advance the story in a predetermined order. This is a great tool to use with students to help them think about the connections between historical narrative and geography or space, either by creating maps for use during lectures or by having students create maps of their own. How to Use: The main page features a step by step guide, tips and tricks, FAQs and tutorials, and a showcase of projects made with StoryMapJS. Looking through these should give you a pretty good sense of what is possible with StoryMapJS. Knight Lab allows you to create and store several maps under your personal account by clicking on “Make a StoryMap.” You must log in using your Google profile in order to start building a new project. The interface is broken down into three main features: a slide deck, content editor for each slide, and a map. Step One: Add a slide using the slide deck on the left side of the page. This should feel similar to working with PowerPoint or any other slide deck software. Clicking the “+” sign will add a new slide, and you can easily reorder and delete slides as you work. Step Two: For each slide, you have the option of adding text and other kinds of media. The editor asks you for a Headline, or title, for each slide and any accompanying text to describe this point in the story. You can also upload media, or pull in media from places like Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, or Document Cloud. You can also customize the look and feel of each marker and slide background. Step Three: Select a location to ground each slide. Simply enter the address or latitude and longitude coordinates to set the pin. This can be as detailed as a physical address or as broad as the name of a city or country. You also have the option of choosing between different map types to customize the look and feel of your project. Repeat the above steps for each slide in your story. While you are working, you have the option to preview your map in the editor interface so that you can easily make changes. Once you are finished, click Share in the upper right corner. You have a few display options to choose from, and can select either a hyperlink or embed code to share the map on the open web. Note: Make sure to use one of these two links to share your work. A common mistake is to copy and paste the URL for the editor page, which any other user will be unable to open and view. If you’re assigning this to students as a project, be sure to make this last step clear so you are able to view their submissions. On the homepage, the StoryMapJS team offers some “Tips and Tricks” for creating effective projects. First, avoid creating a map with too many slides (they recommend no more than twenty). Second, the story you tell should have an apparent connection to location or geography, and slides should be organized so that it provides a logical movement through space. Finally, make sure each slide builds to a larger narrative and that you include both big and small events to keep the flow moving. The instructions above described the most common and user-friendly way to use StoryMapJS. If you are more tech-savvy, or need more control over the display of your Map, there is an advanced option that requires a familiarity with JSON. Examples: In the classroom, this can be a powerful tool to ask students to think about the connections between historical narrative and space. One way to use this tool is to have students think about stories of migration: of people, goods, languages, diseases, or ideas. Then, have them use StoryMapJS to create a narrative that presents an argument about migration that can be linked to the locations discussed in each slide. For instance, how did ideas of democracy spread across the Atlantic World? Have each student select five moments, people, or documents and create a StoryMap that connects these locations to make an argument. Alternatively, you could create a StoryMap to use during class time to demonstrate these geographic connections to students. Another option is to have students take a primary source that is already grounded in geography and create a StoryMap to present the source in new ways. One example would be to have students map travel guides, such as the WPA Federal Writers Project guidebooks. Ask them to select one tour and use StoryMapJS to simulate an American road trip in the 1930s. Another option would be to assign students an issue of The Negro Motorist Green Book and ask them to do a similar project. Doing these two activities together, or having half the class draw from the WPA guides and half from the Green Books, could also be a great way to have conversations about citizenship, racism, and mobility in America by comparing the different maps. Other like sources could include brochures for events like World Fairs, travel logs from explorers, or letters from soldiers stationed in different locations during a war. StoryMapJS also has the option of making projects based on “gigapixels” rather than maps. This simply means uploading a very high-quality image that can be used as the “map” that each slide attaches to. If you are studying a famous work of art, for example, you could upload a high quality version of that image and select portions to zoom in on with slides that discuss different aspects of the piece. This is a more time-consuming approach and requires transforming your image into tiles using Zoomify and hosting your image on the web, but KnightLab provides a handy step by step guide if you choose to go this route. This page also includes a useful example of what a gigapixel project could look like.