2. Getting started with StoryMapJS

In this module, we will learn to make a simple storymap in StoryMapJS.

Estimated time: 20 mins

Getting Started

To get started, go to StoryMapJS and click on ‘Make a storymap’ to go to the web authoring tool.

Next you will be asked to log in with a Google account. StoryMapJS does not allow collaboration or sharing, so if you are working in a team, you should create a Google account specifically for your project so that everyone in your team can share the same account and password.

You cannot change the owner of a StoryMap within the StoryMapJS web tool. Once you start work on a StoryMap, the only way to allow someone else to collaborate on it using the web tool is to share the Google account login with that person.

Creating a StoryMap

Once you have logged in, you will be asked to give your new StoryMap a title, like My First StoryMap. You can change this later.

Click Create, and the web authoring tool will generate your new StoryMap.

If all has gone well, you’ll see a blank StoryMap. At this stage, you will see a world map at a very small scale. This is normal. When you add content to your StoryMap, it will scale automatically to the area you are focusing on.

Adding Content

Now you can add content to your StoryMap.

Alongside the map, the content in a StoryMap comes from a set of slides. These are arranged in a sequence. Each slide is also linked to a location on the map.

Creating a Title Slide

Above the map you will see a notification that this is the title slide. The title slide will display next to the map when visitors first load your StoryMap.

Under the map are three boxes: a Media box to the left, a Headline box to the right, and a text box at the bottom right. You can enter text in the Headline box and in the text box.

The title on your title slide is the first text your visitors will see. Enter a title for your StoryMap in the Headline box.

The default font settings show the Headline in all-caps. We will see how to change the font later.

You can add a short description for your storymap in the text box underneath. In the text box, you will find buttons to create bold text, italic text, or add a link. The “</>” button is used to enter HTML and will be discussed later in the tutorial.

When you’ve finished, click on Preview above the map to see your work.

In the Preview, the map area to the left of your title slide may appear blank or grey. Once you have added your first location slide, the map will appear here, automatically panned to an appropriate region and magnification.

Click on Edit to return to the edit view, and click Save in the top-left hand corner to save your work so far.

Adding media

You can add media to a storymap slide, by entering a link to an image or a video, or by uploading an image to StoryMapsJS. Any media you upload will become publicly accessible on the web, and will only be deleted from the web if you delete the whole StoryMap.

There are boxes where you can add a credit and a caption for your media. The text in these boxes will only be displayed if you add media to that slide.

Media you add in this field will display above your text.

A StoryMap slide can quickly look ‘busy’ and overcrowded, especially if it has both a picture caption and a headline.

Remember to click Save regularly.

Slide backgrounds

By default, the slide background is blank, but we can add colour or an image. To do so, click on Background Options in the lower right-hand corner.

Now we can specify a background colour for the slide using the colour picker or a hexadecimal colour. We can also upload an image to use as the background. StoryMapJS treats whatever colour or background image we specify as partially transparent, although very dark colours will appear almost opaque.

If we set a background colour or image, the headline text will turn white, regardless of the colour of the background. It is not possible to use black text with a slide background. The headline text will turn white even if the background is white (#ffffff). To remove the background, delete everything in the Slide Options/Background Color and Background Images boxes; once the background is empty, the headline text will turn back to black.

There is no way to apply a background to every slide at once. Each slide has to be changed individually.

Adding Location Slides

Next, we can add some location slides to our StoryMap. Every slide (except the title slide) is linked to a particular location on the map. When the storymap is viewed, the map will automatically pan to focus on the location linked to that slide.

In the Edit view, click on the large cross marked ‘Add Slide’ on the left-hand side.

We need to link this slide to a location on the map or the image. You can use the Search box in the bottom centre of the map to find a location by name or by coordinates. The pin will jump to the selected location.

You can also drag the pin to the location you want. To help find the right position for the pin, you can zoom and drag the map.

Use the + and - buttons to zoom into and out of the map until you reach the zoom level at which you want the map to appear next to that slide. If Preview does not display the map at your selected zoom level, you can force the maps to refresh by switching to a different map, going into Preview, and then going back into Edit mode and changing back to your chosen map (see below).

Click on Preview to see your storymap. The map now appears next to your new slide, centred on the location identified by the pin.

Dragging the map will not change the way it appears in the storymap; it will always be centred on the pin.

We can now add text, images and a background to our location slide, just as we did with the title slide.

Completing your Slides

Repeat the process with your next slide.

When you are adding location slides, you may find that frequent changes in the scale of the map create a dramatic effect which some viewers find distracting. The best storymaps avoid changing the zoom level of the map more often than necessary. Preview your storymap to make sure you are happy with the result.

In Edit mode, your slides appear in a slide browser column on the left-hand side. To change the order of your slides, simply drag and drop them into the correct order within the slide browser. The title slide cannot be moved.

To delete a slide, hover the cursor over the slide in the slide browser and click the tiny x which appears at the top right. You will be asked to confirm. There is no Undo.

Click on Preview, and (if necessary) the ‘Back to the Beginning’ button. The map for the title slide is now at an appropriate magnification. It resizes automatically to fit the locations in your slides. The default scale of the map on the title slide is set by StoryMapJS and cannot be changed. To change the magnification while you are viewing the map, double-click in the map: double-click will increase the zoom, and Shift+double-click will reduce the zoom.

You will also see that a dotted line has appeared linking the two locations on the map. We will see how to toggle this on and off in a moment.

Continue adding location slides until you have finished your StoryMap. Many StoryMaps have between 5 and 20 slides. Make sure to save your StoryMap.

Congratulations! You have finished your StoryMap. The next module will discuss how to publish and share it.