Creating a 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. Check out the possibilities 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)

Story maps are templates of code ready to use to consume your interactive maps and combine them with powerful stories, graphics, videos, photos and other digital media. Some of them, such as the Side Accordion, will need for you to download the code and customize it a little. I encourage you to do this since it is very powerful and not as intimidating as it sounds. Click on learn more to choose and download the template, as well as accessing the tutorial.

Create a Story Map

In this tutorial, we are going to create a story map that combines the three maps you created earlier.

- Go to My Content, then choose one of your maps (for example: Co2 Emissions), click on the inverted arrow to Open in map viewer.

- Then Click on 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. Click on the Create a Web App button

Notice all the possible templates.

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

- Enter the Title (Mapping and Modeling Climate with GIS by YourInitials), Tags, Summary for your Story Map and click Done

- Click Start

Configure your story map

You will see a new window of Map Journal Builder, follow the following steps to configure your story map:

1. Choose Side Panel. Click Start. Enter the title for your story journal - "Mapping and Modeling Climate with GIS". Click the Forward arrow to start editing your story map.

2. After this, you should be able to see two different sections of your story map: Main Stage and Side Panel. For every stop in your map journal, you will have a main stage and a side panel.

- STOP 1: Landing Page

  • MAIN STAGE: You should be asked to enter the content for your Main Stage, you can add a map , image, video or webpage.In this case we will add a image ( Always start your story map with a picture/v to attract the audience)

      • Click on Image then choose URL:

      • Go to google.com and search for images for climate change. Find a good quality image and open it. Right click on that image and Copy image address

      • Paste the URL copied to your main stage content image window. Leave it as Fill.

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

    • You can enter the text for your related map or you can search on google.com and get information from there. Make sure you always give credits to the source. Here is an example: https://climate.nasa.gov/evidence/

    • You can also add an image to the content by clicking on the camera icon in the menu and paste the URL of the image. Click Save

- STOP 2: CO2 Emissions

To add a new Section - Click on the ADD SECTION button at the bottom left of your page.

  • You should be asked to enter the content for your Main Stage, you can add a map , image, video or webpage

    • Enter the title for this section: CO2 Emissions per country

    • 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 : CO2 Emissions in Metric Tons Per Capita

    • Leave the settings default.

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

    • Let's embed a website from NASA that has a quiz about CO2. In the Side Panel window, select the Insert an image, video or web page button. In the Media section, click the Web page button and add this link: https://climate.nasa.gov/quizzes/quiz-co2/

    • Configure the Position to Custom and select 700 as the height of the frame. Click Apply and Save.

- STOP 3: Sea Level Rise

Following the steps shown earlier, create a stop with the Sea Level Rise web map in the main stage and insert a video about sea level rise by NASA (click on Embed and copy the code, then change the editing mode in the side panel to HTML and paste the code: <iframe src="https://embed.theguardian.com/embed/video/science/video/2015/aug/28/nasa-sea-levels-rising-human-climate-change-video" width="560" height="315" frameborder="0" allowfullscreen></iframe>.

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.

Once you have everything configured, click Apply.

On the top right corner of your story map, click Save and make sure it is public.

Once you saved it, in the top menu click on Share. This will provide you with a link to your story map. For example : http://arcg.is/2mrGgrK

You can also embed the story map on your website but due to default layout settings of the story maps, they look better on a web browser.