StoryMapJS - Creating and Editing a StoryMap

Creating and Editing a StoryMap

StoryMapJS is a free tool to help you tell stories on the web that highlight the locations of a series of events.

If you experience issues with StoryMapJS, you may refer to the additional documentation or contact the ITS help desk at 909-621-8061 or servicedesk@pomona.edu. Additional video tutorials are available via Pomona College ITS at https://app.vidgrid.com/content/jmaRnqQFZPqn.

Creating a StoryMap

Go to https://storymap.knightlab.com/
Click Make a StoryMap
Click Sign in with Google and continue the signing-in process
Input a name for your StoryMap under “What do you want to call it?”
Click Create

Slides

The first slide that appears will be the title slide. The title slide will show all points from the other slides, so users can not input a location quite yet. From there, users can create new slides by selecting “Add Slide” on the left-hand side as many times as needed.

Editing Text Content

Users can input a headline and body text, which can be used to describe or expand upon the contents of your map.

The field to input a headline is on the lower right-hand side and will state “Headline.”
Immediately below the headline field is the body text field. Users can bold or italicize their text using the first two buttons at the top of the text field. Using the third button at the top of the text field, “</>,” users can format their text using HTML markup. The last button at the top of the text field allows users to insert a link.

Graphical user interface, application

Description automatically generated

Editing Media Content

Users can upload media from a variety of sources, including Twitter, Flickr, Youtube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud, and much more. To do so, users should refer to the lower left-hand side that states “Media.”

Users can input a URL to their media, where it states “URL to your media.”
Users also have the option of directly uploading an image from their computer. To do so, select “Upload an Image.”
Using the “Credit” text field, users can credit the media’s original source.
Using the “Caption” text field, users can include a short caption describing the media used.

Graphical user interface, application

Description automatically generated

Editing Background Options

Select the “Background Options” button on the lower right-hand side. Users have the option to use a color or an image as a background, as well as both simultaneously.
To use a color as a background, click on the “Background Color” text field and adjust color selections as desired. Users can even adjust the opacity of the color by using the checkered slider.
To use an image as a background, users can either enter a URL into the text field below “Background Image,” or select choose a file to directly upload an image.

Editing Map Options

Users can search for a location or enter coordinates using the search box in the middle of the initial map that appears. Users can not input a location for the title slide. Once a location is selected, users can select the marker that appears and move it around, using the zoom-in and out feature to get a better feel for where the marker should be placed.

Users can also create a custom marker, that will replace the default marker with an image, to use on their slide. This option would be found in “Marker Options.”

Select the “Marker Options” button on the lower right-hand side
Users can either select an image they’ve previously uploaded as media by selecting from the dropdown menu that appears or upload a new marker image by selecting choose file and then clicking to upload.

Editing Other Options

Select “Options” at the top of your current slide
To the side of “StoryMap Size” users can adjust the width and height of their story map.
To the side of “Language,” users can change the default language using the dropdown menu that appears.
To the side of “Fonts,” users can change the default font, by using the dropdown menu to select another font.
Users can select whether they want their story map to be treated as a cartography or an image by selecting the options to the side of “Treat as.”
To the side of “Call to Action,” users can decide if they want their title slide to have a button with a phrase to begin the procession of slides. Of course, if this is the case, users can input the desired phrase into the text field beside “Call to Action.”
Finally, users can select what type of map they want by selecting from the drop-down menu beside “Map Type.”