Designing Your Story Map

Story Maps are web applications that allow you to combine the functionality of interactive maps with multimedia content (photos, videos, audio, timelines) into one unique app. They are templates of code ready to consume your web maps and online content. You can view examples here: http://storymaps.arcgis.com/en/app-list/

Clemson students with support from CCGT have created their own story maps: http://www.clemsongis.org/projects (check out Planning for Tomorrow's Climate, Mapping Tigertown, and participate in Mapping the Tiger Spirit, and the Clemson Safety Survey)

A great example of a story map is from the South Carolina Geologic Survey. This uses a tabbed layout, called a Story Map Series, to take the user through a virtual field trip.

1. Creating a Story Map

1. Go to Content, click on the web map you created, then click on the inverted arrow to Open in map viewer.

2. Click on the Share button in the top menu. Always make sure you map is shared with the public,

and all the sharing properties for the layers are updated.

3. Click on the Create a Web App button.

4. At the bottom, click on Page 4 and Choose Story Map Journal. Click on Create Web App .

5. Enter the Title, Tags, Summary for your Story Map and click Done.

Title: Geologic mapping story map by *Your Name*

Tags: geology, field mapping, Clemson

Summary: Story map showing geologic information mapped in the field by *Your Name.*

6. Click Done.

2. Configure your story map

The Map Journal Builder Welcome Screen will open which allows you to set up your story map. Follow these steps to configure your story map.

6. Click Start.

7. When prompted What do you want to call your Map Journal? enter the title for your story journal - "Mapping the Geology of Clemson". Then click the forward arrow.

After this, you should be able to see two different sections of your story map: Main Stage and Side Panel. You will be prompted to enter the content for your Main Stage, with the options of adding a map, image, video, or webpage.

8. In this case we will add an image ( Always start your story map with a picture to attract the audience)

      • Option 1. Click on Upload and then drag and drop a picture from your computer or browse to it's location on the computer (look in the D:\GeologyStoryMaps\images\ )folder.

    • Option 2: Choose Link and then choose URL:

      • Go to google.com and search for images relevant to your project. Find a good quality, high-resolution image and open it. Right click on that image and Copy image address

      • Paste the URL copied to your main stage content image window.

Then, you should be asked to fill the content for Side Panel

10. You can also add an image or a video to the content by clicking on the camera icon in the menu. For example, try adding a YouTube video:

    • Go to YouTube and search for a video about South Carolina geology, field mapping, or a relevant topic. Click the Share button under the video and copy the URL.

    • In the Story Map side panel, click the camera icon. Click Video and then choose YouTube. Paste the link in the box, then click Check and Select this video. Click Apply.

      • (Try https://youtu.be/U8vWb6nPkQc )

    • Click Save to save the changes and then view the story map page.

9. Enter text which gives an overview of your story map and project. If you include information from other sources, make sure you always give credits to the source.

Once you're finished, the landing page of your story map will be created. The first thing a user will see is your main stage and side panel information.

11. SECTION 2: To add a new Section - Click on the ADD SECTION button at the bottom. You can create a new section for every outcrop you visited.

  • You should be asked to enter the content for your Main Stage. You can select a map, image, video, or a website.

    • Enter the name of the outcrop for the title of this section

    • In this section we will add a map we created, so click on the drop down menu after Map and choose the Map you created.

    • Leave the default settings. Click Next.

  • Then, you should be asked to fill the content for Side Panel

    • You should enter text describing the outcrop.

    • You can add a picture of the outcrop and/or a hand sample or thin section. Click on the camera icon in the menu and select the outcrop_1.jpg image.

    • Enter a caption, such as Lower Well Field Outcrop. Click Apply.

12. Repeat the process to build a series of journal stops. Try adding different text, images and/or videos for each location.

Once you have created a stop for each outcrop, you can set the map to a different extent to move from outcrop to outcrop.

14. Go to your second stop (i.e. the section with your first outcrop).

15. Click the pencil icon to Edit Section. Click on the Main Stage tab to open it.

16. Next to the word Location, click on Custom Configuration. Then zoom and drag the map to the outcrop of interest. Click Save Map Location to update the map and then click Save.

17. Repeat the steps for your other sections.

3. Changing the settings for the layout of your story map

To change the layout of your story map, Click on the Settings in the Top Menu of your Map journal builder. A new window will open and you will able to see the tabs for changing the Layout, Layout Options, Theme, Fonts, and Header.

  • Layout - Under this tab, you have two options for the panel: Side Panel or Floating. Choose the one you think will work for your story.

  • Layout Options - Under this tab, you can change the position of your side panel from left to right and you can change size of your panel and mainstage ( Small, Medium or Large). This is totally on you whichever you think will work best.

  • Theme - Under this tab, you can change the color theme for your story.

  • Fonts - Under this tab, you can choose the type of font you want to have for your Section title and Section Content.

  • Header - This tab allows you to change the header for your story. You can change the logo, customize the link or share your story on facebook/twitter or create bit.ly link.

18. Experiment with the theme color palette and fonts. Once you have everything configured the way you would like, click Apply.

19. On the top right corner of your story map, click Save, then click Share and click to make it Public.

From this menu, you will have a URL link to your story map. For example : http://arcg.is/0nn9Gy