Story Map App
The StoryMap app (ESRI) is a web-based platform that provides a user-friendly interface for creating dynamic and immersive storytelling experiences that combine spatial information with multimedia content.
With the StroyMap app, users can:
1. Create narratives: write text to accompany map features, providing context, explanations, and storytelling elements.
2. Add multimedia: embed images, videos, audio clips, and other multimedia content to enhance the narrative.
3. Customize maps: utilize various basemaps, map layers, and styles to visualize data or highlight specific geographic features.
4. Interactivity: incorporate interactive elements such as slideshows, pop-up windows, and clickable features to engage the audience.
5. Share and collaborate: publish and share StoryMaps online, allowing others to view, comment, and collaborate on the content.
This story map focuses on some of the Coast Salish communities, aiming to equip you with a variety of tools that you can customize for your own storytelling purposes.
Software requirements:
- ArcGIS Online or ArcGIS Enterprise account with sharing privileges
Please not that this story map will not be made public.
Part I: Introduction & Overview of Story Map Builder
The first thing you need to do is create an empty story map. You will then create a title page and set some basic theme properties.
1) Download the folder Story_Map_Data_Art.zip here https://tribalgis-my.sharepoint.com/:u:/p/sarques/EWfZUPraHWRNkpIqIpm0dGcB55D8ywN2T4-W3rbCT8EXww?e=k6Tx5F
2) Save it into a folder named “StoryMap_YourInitials”, right click on Story_Map_Data_Art.zip and unzip it (or choose extract, extract here, extract all…)
3) Open a web browser and go to storymaps.arcgis.com
4) Sign in with your ESRI’s credentials or provided credentials.
5) Click New Story on the top right of the page and choose Start from Scratch
Alternatively, you can click on the “Start a story” button.
6 - First, let's create our cover. Place your cursor in the Story Title area and type Coast Salish Communities - <Your Initials>
7 - Place your cursor in the subtitle area below the title and type Navigating Tradition, Culture, and Resilience.
8 - At the top left, on the menu bar, notice the Draft tag and the Saved notification. You have not published the story yet, so it is in draft mode, much like a draft email you have not sent. The story map is also auto saved each time you make changes.
None of your changes will appear in the published version of the story map until you click Publish. If you have already published the story map and are revising it, you will see an Unpublished Changes tag.
9 - Let’s look at the Design options, click Design from the menu bar at the top.
The Minimal Cover and the Summit theme are selected by default.
10 - Let’s switch to a side-by-side cover so you can see the differences in the design.
11 - In the Optional Story Section, make sure that you enable Navigation and Credits. The Navigation links allow you to jump to a specific heading in your story. The Credits option allows you to include custom credits and attribution at the end of your story.
12 - Choose whichever Theme you'd like. I’ll choose the Tidal theme as the storymap is about the Coast Salish communities.
You can also look at the featured themes gallery for more options or create your own theme.
13 - Scroll down to the bottom of the design window and click on the Upload logo tab.
14 - Browse your Windows file explorer until you find the Story_Map_Data_Art folder (that you just downloaded and unzipped), select the Tribal GIS logo and click open.
15 - In the Display options select “Show logo in the header”
If you were to create a storymap for your own community, you may choose an appropriate logo.
16 - In the Logo link section paste the following URL https://www.tribalgis.com/
17 - Once you are finished with your design, click the ‘X’ at the top right of the Design panel to close it. Examine the new colors and fonts. You can go back to Design and try another cover if needed…
18 - Our cover design is not finished as we are going to add a cover image. On the right panel, click Add Cover image or video.
In the Add and image or video, browse your files and in your Story_Map_Data_Art folder select the image named “SS_ChrisPaul” and click Add at the bottom right.
Your display should look like this one.
19 - Click on the little gear wheel to open the image’s options.
You may need to hover your cursor on your image to find it.
20 - In the Display option, adjust your image’s focal point.
21 - In the Properties options and under Attribution, copy and paste the following text: The Salish Sea by Chris Paul. Placed at the famous Oak BayMarina (Victoria, BC, Canada), this wonderful iron sculpture faces south to theOlympic Mountains and Seattle. The sculpture depicts existing life on earthwelcoming new life coming-in-bound to earth on a comet. The herring, thesalmon, the orca, and the thunderbird reach up to the sky and to the comet’.Photography by Dr. Andrew Ross & William E. Smith (credits: wesmith @ https://imgur.com/gallery/5VaL7#S8hTZoA)
Always cite the sources, including yourself.
22 - Click Save. The attribution to give credit to the original content creator will appear as an icon at the top of your image.
The two sets of arrows allow you to change the panel's size and/or switch the panels placement. I’ll leave mine the way it is.
Now you are ready to start your story!
23 - Let's start building the narrative and Add Text and Photos
In the StoryMap app, Block refers to the individual component or building block that you can use to create your interactive storytelling experience. The blocks allow you to incorporate different types of content such as text, images, maps, video…You have three main types of blocks: basic, media or immersive.
The text you need has already been written for you in the storyboard.doc document located in the Story_Map_Data_Art folder, so you can just copy and paste it.
24 - Below your cover, left click on the green button with the white + sign Tell your story.
25 - The block Palette opens. In the Basic block select Text.
26 - Type: Geography of the Salish Sea.
To format this as a section header, select the text you just typed and click the larger and left-most of the two text style options. The exact look of these will differ depending on the theme you choose.
27 - Now click the + just under your section header and select Text from the list again.
28 - Open the storyboard.doc document from the Story_Map_Data_Art folder.
29 - Copy and paste the text for Block 1 and paste it in the new text block in the story map.
To format your text, select your text to display the formatting options.
30 - Finally, you will Add an image (Map of the Salish Sea) to go with this text block. Click the + under your paragraph, go to the Media Blocks and select Image.
31 - Switch to the Link tab in the Add an image window.
32 - In the storyboard.doc document, copy the URL for Block 2 and paste it into the Link box in the Add an image window.
When you copy a URL link make sure that you remove any space before and/or after the link.
33 - Click Add to insert the photo into the story map.
34 - Add this caption to your image: The Salish Sea & Surrounding Basins (Stefan Freelan, 2009).
35 - Change the Options if needed.
Remember that your story map is automatically saved. If you close your ESRI Story Map or if your computer crashes... Go to storymaps.arcgis.com and sign in. Doing so will land you on your very own Stories' page. It will look something like this.
Just click on your story to open it!
36 - Let’s preview your story map. At the top right, select Preview.
The Preview menu has 4 options: full screen, Desktop, tablet, and phone. Explore the different options.
Part II: Advanced Media
Story Maps have the capability to incorporate all sorts of multimedia: photos, videos, and audio, as well as maps. You can also link external resources to ArcGIS Online (or Portal) web apps you have created. These can be linked with a card, which will open the URL in a separate browser tab, or some sites will allow you to embed them directly so that the user does not have to leave your story map to interact with the site.
In this exercise, you will:
- Learn about ArcGIS Online
- Create and add a Map (Express and from ArcGIS Online)
- Link to a Website
1 - Add a Map block to create an Express map. We’ll make a map showing the location of a few Coast Salish communities.
You can use multiple maps in your story including 2D and 3D. An express map is a simple map with drawn graphics and annotations. There is no GIS data, but you can link images & text.
2 - Select New Express Map or Start an Express Map.
You should see a similar display.
3 - First, let’s look at our map Options. At the top left, click on the little wheel gear to open the Options window.
In the Map configuration section enable Search & Current location. You may want your readers to be able to pan, zoom, see their current location on the map, and search for locations.
Enable the Legend as well but make sure that you do not enable Keep the Legend open. You’ll want your readers to display the legend if necessary. If you enable the option, your legend will be open as soon as your map appears.
Adding an Overview map provides a geographic context to your location on the globe.
Next, open the Basemap section and choose Imagery (Hybrid).
Your display should look like this.
4 - The tool bar has many useful drawing options. Hover over each one of them to display details.
5 - In the Search location box type Lummi and select Lummi Reservation, WA.
6 - By default, the app is choosing the Add a point drawing tool. Click on the Add to map button.
A new editing window appears on your left.
7 - Let’s add an image of the Lummi Nation logo. Click Add image or video, browse your files and open the Story_Map_Data_Art folder. Next open the Express Map folder, select Lummi”, click Open, and Add.
8 - Your image is cropped by default. Click the image’s wheel gear to access the Options. In the Display options, select Fit (do not crop).
9 - Open your storyboard.doc and in Block three copy and paste the Lummi Nation URL in the Attribution box (image Properties options). Click Save.
10 - Below the logo, replace Lummi Reservation, Washington by Lummi Nation.
11 - In your storyboard.doc, copy the narrative about the Lummi Nation and paste it in the Description box.
12 - Finally, change the symbol color to a bright red, and Save your edits.
Now when you click on the Lummi symbol on your map, a pop-up window opens.
13 - Repeat the steps for the Tulalip and Makah Nations and click Save (bottom right) when you are satisfied with your edits. Your final express map should look like this one.
Exercise: Add a block Separator and Heading 1 text (Coast Salish Communities Locations) block before your Express Map.
If you need to edit your Express map, click the Edit button located at the top of your map.
Congratulations on creating your first Express Map!
Add advanced media to your story map:
In this task, you will create a Web Map showing the Tribal Lands in Washington State and add it to the story map.
The feature layer containing the Tribal Lands has been published via ArcGIS Online, but the story map requires that it be contained in a web map.
14 - Open a New Browser tab and go to arcgis.com. Enter your login credentials if necessary.
15 - Go to the Map tab to open an empty map. You can use Map Viewer or Map Viewer classic. I’ll use Map viewer.
16 - Click Add and then Browse Layers and change the filter at the top to ArcGIS online.
17 - Search for Tribal Lands Washington Department of Ecology and look for the feature layer called Tribal Lands owned by WAECY_Geoservices.
To look at the feature layer’s details and metadata, left click on its name. At the bottom of the pop-up window select View Details.
The original dataset is also available here: https://geo.wa.gov/datasets/fb1e72ec1d9146e09b56baf2ca686d15/explore
18 - Once you are done exploring the metadata, return to your Map app, and click Add.
Your display should look like this one.
19 - Close the Search tool and expand your Tools pane (bottom left of your screen).
20 - Change the basemap to Imagery Hybrid.
21 - Now, let’s edit the feature layer. In your Tools pane, click Layers and on the layer’s name to display its properties. The LAND_TYPE attribute is displayed by default.
22 - In your Layers pane, click the Overflow (three little dots) after the layer’s name and select Show table.
Explore the attribute table.
23 - You can choose a different attribute to display if needed. Left click on your layer name again to display its properties. Enable Showing map legend. At the bottom of the Symbology section, select Edit layer style.
24 - Left click on LAND_TYPE and select TREATY_NM (Treaty name).
Your data view now displays the different treaties.
If you select the Style options, you can modify the symbol style, the transparency etc.
25 - Let’s go back to the LAND_TYPE attribute display. You can also access the Properties, Style, Filter…by using the tool bar located on your right.
26 - Change the color ramp to darker shades (metro movement color ramp) and apply a Fill transparency of 50% and an Outline transparency of 0%. Click Done twice when you are finished.
You should see something similar.
27 - It is time to Save your map. In the Tools pane, select Save and open and Save as.
28 - Add a title, tags, and paste the following text in the Summary box: This dataset describes Tribal Lands in Washington State. Included are areas where the tribes ceded title to their historic areas of use to the U.S. Government through various treaties enacted during the latter half of the 19th century. 29 - Click Save when you are finished.
30 - Close the Map browser tab and return to your story map @ storymaps.arcgis.com
31 - Below your Express map, click the +to add a new content block and choose Map.
32 - From the My Maps section, choose your new Tribal Lands (WA) map.
The new window should look familiar as you used a similar one to create your express map.
33 - Click the little Gear and activate the Map configuration options that you can see below.
34 - When you are done click Save to apply the changes to the block in the story map.
Notice that the map’s caption defaults to the name of the WebMap.
Maps are inserted as a Medium size block by default, but can be resized as Floating, Small, or Large.
35 - If you need to edit your map, hover over your map and, on the toolbar at the top, click the Edit button to return to the map configuration screen.
Pan and zoom and test out a couple of the pop-ups. The Home button will return you to the default extent, and you can toggle full-screen mode if you like.
36 - I feel that the Tribal Lands map should appear in the story before the Express map. Let’s move it. Left click on the little 6 dots icon at the top left of your Tribal Lands map, maintain a left click and drag it above your express map.
Embedding Web Content
You can insert links to external websites that are relevant to your story map as either link cards or as fully functional embedded blocks. You can also embed another web app (dashboard, another story map…) from ArcGIS Online. You will first insert a link card pointing to the Tulalip Nation's Website.
37 - Add a separator after your last map.
38 - Click + to insert a content block just below your separator.
39 - In the Media blocks, choose the Embed option.
40 - In your Story_Map_Data_Art open the storyboard.docx document, copy the URL for block 4 and past it into the box in the Add web content window.
41 - Click Add to insert the link card. This is the default configuration for embedded web content (interactive embedded).
42 - Let’s display it as a link card. Hover over the card and click Options from the toolbar at the top.
The entire card is a live link, not just the written URL at the bottom. Click on it to explore the website.
43 - You can change the description on your card if needed. Hover over the card and click Options from the toolbar at the top.
44 - Click the Custom card details toggle and clear out the text in the Description box.
45 - In the storyboard.docx document, copy the text for block 5 and paste it into the Description box.
46 - Next, let’s change the Thumbnail image to the Tulalip Tribes logo. Click Upload Image at the bottom left of the Card options, browse to your Story_Map_Data_Art ,and select Tulalip.png.
47 - Click Save to apply the changes to the link card.
These changes do not affect the Tulalip Nation's website.
48 - Insert a block Separator after your card.
Exercise: It would be great to add a video that introduces the Coast Salish communities’ history.
Here is the video URL: https://www.youtube.com/watch?v=OIjAR3f9c60
Please add the video to your story map in a strategic location. Where would you add it?
you can upload videos up to 50 MB for the following file types: MP4, MOV, MKV, AVI, and WEBM. Cover videos should be much smaller, ideally under 1MB. It is recommended to use videos under 10 MB in most situations.
Here is another video URL : https://www.pbs.org/video/coast-salish-QXRvWT/
This video is way above 50 MB. How and where would you add it to your story map?
Add a Swipe Block to your story map
The Swipe Block is an excellent block for comparisons as it allows you to compare two web maps or images with an interactive slider. In this task you will display a time-series of the Elwha River Dam (WA) removal using two aerial photos to observe the riverbed & delta changes over time.
First here is a little bit of information about Elwha River Dam removal project.
Which block would you use to add it to your story map? The Swipe block!
Add the following Heading 1: Ecosystems restoration and environmental resilience.
49 - Let’s add the Swipe block. Click+ to insert a content and choose the Swipe block.
50 - Click Add Image on the left panel, browse to your Story_Map_Data_Art folder, and select Elwha_2006.
51 - Click Add to insert your first image.
52 - Hover over the Swipe window and click Options from the toolbar at the top.
53 - Click Display, select Fit (do not crop) and choose a background color.
54 - In the Swipe options box, select Properties and write down: Elwha River before and after dam removal (2006 - 2017) – NAIP, USDA.
55 - Click Save.
56 - Repeat the steps using the image Elwha_2017. You don’t need to add the text again.
57 - Add the following caption underneath your Swipe window: Elwha River before and after dam removal (2006 - 2017) – NAIP, USDA).
Play with the Swipe tool and analyze the changes in the time-series. Look at the river Delta, and the former dam location.
Part III: Immersive Blocks
Immersive blocks are designed to be media-forward mapping apps whose functionality is already included in the Story Map Builder. These blocks are full page-width sections designed to let your user dive deeper into a particular subject: Map Tour, Slideshow, Side Car…
In this task, you will add a Map Tour block to walk through some of the different Coast Salish Tribes’ Traditional Lifeways. In a Map Tour block, each geographic location has a ‘slide’ that might have text and one or several photos or videos. You will create slides for several of the Coast Salish Sea Tribes’ Lifeways. Each image has a short description, which you will find in the storyboard.docx document.
1 - Click + underneath the Swipe block and add a Separator and a Text block.
2 - Type Coast Salish Traditional Lifeways and format it with the heading style #1.
3 - Click the + underneath the heading and add a Map Tour block.
4 - When prompted select the option Start from scratch.
5 - In the Select a map tour layout window choose Guided & Media Focused and click Save.
You should see a similar screen.
6 - First you will need to set up the general properties for the map. In the left panel with the map and text placeholders, click the map Edit.
The set is very similar to the general map block settings.
7 - Set the Map type to 2D, enable the Current location, change the current basemap to Imagery (hybrid), change the point color to a color of your choice, and choose an automatic initial zoom level.
8 - Click Save at the bottom right to apply changes. These map settings will be applied to the entire Map Tour.
In the storyboard.docx document, the second table has a row for each slide in the Map Tour block, with the slide’s title, text description, a set of coordinates for the map location, and the photo’s URLs.
9 - In the second table in the storyboard.docx document, copy the Slide Title for Slide 1 and past it into the Slide Title (optional) area of the Map Tour.
10 - Copy the Slide Text for Slide 1 and paste it into the text area below the slide’s title.
11 - Now, click the Add location button.
12 - In the Search by location box at the top right of the Tour point location window, copy and paste in the Coordinates for Slide 1from storyboard.docx table and press Enter.
13 - Click Add to Map to place the point.
14 - For the zoom level, zoom out so that you have a good view of the Salish Sea (Zoom Level “counties”).
15 - Click Save at the bottom right to add the point to the tour block.
16 - Lastly for this slide, you need to Add in the photo. The URLs links to all the photos you need are in the storyboard.docx. Click Add image or video in the center of the Tour Block.
17 - As you did in previous sections, switch to the Link tab and paste the first URL for Slide 1 from the storyboard.docx table.
18 - Click Add to upload the photo.
19 - Click the + on the toolbar at the top of the photo to add additional media (only if you have additional media).
20 - Switch to the link tab and copy and paste the URL links for the Salmon’ photo #2 and photo #3.
21 - Use the arrows in the photo section of the block to scroll through the three photos. You could add a video or other media as well.
The photos are cropped so let’s edit them.
22 - Click on the gear to open the Options window. Select Fit (do not crop) for each one of them.
You can also reorder your media.
23 - Click the + at the bottom right corner of the screen to add a new slide.
Repeat the steps for The Bald Eagle, the Killer Whales and the Shellfish.
Your final Map Tour should look like this one.
At the bottom left of your Map Tour the Options’ drop-down menu allows you to change the layout or the numbering if needed. Explore the different options.
24 - Add a separator below your Map tour.
25 - Add an embedded link card for the following URL: https://www.tribalgis.com/ and change the thumbnail by uploading the Tribal GIS Logo located in your Story_Map_Data_Art folder.
Part IV: Preview and Publishing
1 - When you are finished, click Preview on the top menu bar.
2 - Scroll through your story map making sure to check that it looks good on a phone or a tablet as well.
3 - When you are satisfied, return to your story map draft.
4 - On the menu bar at the top, Click Publish. You have three options: Private, Organization, or Everyone. I’ll choose my organization here which is NTGISC (Tribal GIS). Feel free to do the same or choose a different option.
5 - Click Publish.
The StoryMap Builder goes through all the media and maps in your story and checks that the sharing settings match. If anything does not match, you will be alerted when you publish.
6 - If you see any issues after publishing, you can edit your story map at any time. You can also unpublish your story if needed.
We hope that this article has been helpful! If you have any feedback or questions, please feel free to send us an email or connect with us for a chat. The NTGISC team is here to assist you further!
Resource (s):
https://www.esri.com/en-us/industries/tribal/challenge/overview
https://doc.arcgis.com/en/arcgis-storymaps/get-started/faq.htm