Story Maps for Natural Resources Fall 2019
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 Envisioning Risk, Planning for Tomorrow's Climate, or the story map we will be creating during this session: Biodiversity at Risk.)
1. Examples of Great Story Maps
Some examples to spark your creativity can be found at the links below. These are great uses of multimedia and mapping which draw in the user! They also demonstrate some of the different layouts and functionality available through various templates.
2. Our Goal: Communicating about Biodiversity
In this tutorial, we will be creating a story map with the goal of communicating the topic of biodiversity to the general public. Our main subjects will be:
- What is biodiversity?
- Why is important?
- What are the major threats?
- How can the audience help?
3. Interactive Map: Freshwater Bird Species
One of the sections in the story map will be an interactive map of number of freshwater bird species around the world. To do this, we will use a dataset already published in ArcGIS Online by an authoritative source.
To go to the Living Atlas, open up a browser, and type: livingatlas.arcgis.com. This will take you to the home page. Notice all of the samples datasets you have available at your fingertip (active hurricanes, wildfire activity, forest type, land surface form, land cover NLCD, tree canopy).
Click the Browse button and in the search box type freshwater. Hit Enter. Notice Number of Freshwater Bird Species. To see this step, click here.
Read briefly the description to understand the data source and meaning of the classification.
Click on the name to open its overview in ArcGIS Online (sign in with your Clemson ID and password if necessary).
Press the Open in Map Viewer button on the top right corner.
Notice the pop-up window when you click in an area.
In the Contents window, click on the Show Legend button to understand each category.
Save your map by clicking on the Save button. Save as:
- Title: Freshwater bird species by YourName
- Tags: freshwater (hit Enter), birds (hit Enter), biodiversity (hit Enter)
Click SAVE MAP.
Make your map public by clicking the Share button and checking the box next to Everyone.
4. Creating your Story Map Using Cascade template: Biodiversity at Risk
The map you just created will be a part of the story map, which is our ultimate goal.To get started with your story map, stay in ArcGIS Online and click the Home button on the top left corner.
Navigate to the Content section.
Click the Create button.
Select App - Using a Template.
In the Create a web app window, go to the Build a Story Map menu and select Story Map Cascade. In the window that appears, select CREATE WEB APP.
- Title: Biodiversity at Risk by YourName
- Tags: biodiversity
After you finish with the initial settings, notice the builder has created a template with your title and a background image.
4.1 Cover Section
Remove your name from the title so it is just Biodiversity at risk.
We are going to replace the background image for a video showing different ecosystems.
Click on the Add your image or video button.
Select Link to Content.
Open a new browser. In the Google Search box, type: nature scenery planet earth.
Go to Videos. In Youtube, play the video 3 HOURS of AMAZING NATURE SCENERY on Planet Earth. Link:
https://www.youtube.com/watch?v=BHACKCNDMW8&t=6303s
Notice the first 3 seconds contain some credits.
We want to publish this video to our story map without those first three seconds Play the video until it is at 4 seconds.
Click the SHARE button.
Select the button that says Start at 0:04.
Click on COPY so you copy the new link that should be like this: https://youtu.be/BHACKCNDMW8?t=4
Back in the story map, paste the link in the box below the text that says: Link to an image or video on the web.
After pasting the link. Click the Check sign on the right-handside of the box.
Your video should now start playing.
Notice the orange heart on the top left corner. It means your story map "has issues" that need to get fixed. To do this, click on the pencil button on the bottom left corner.
The text in orange indicates your problem: the media selected is not supported on mobile.
Click on Add alternate image.
Select Unsplash. In the Search for photos box, type: nature. Hit Enter. Select your favorite.
Click the blue check box on the bottom left corner of your cover section.
Save your map by clicking on the save button on the top left corner.
4.2 First section: What is biodiversity?
Our first section will have as goal to explain what biodiversity is through a series of captions, photos, and videos.
Click on the down arrow on your story map cover to get started. Notice the + sign. This is the way you add content to your story map.
4.2.1 Adding a caption
Click on the + and select text. Type: "Humanity must stop the pace of wildlife extinctions, or face extinction". United Nations Report, 2019
Save your map.
4.2.2 Adding a photo
Click on the + sign again. Select Media - Link to Content. Copy and paste this link: https://sites.google.com/a/g.clemson.edu/clemsongeospatial/home/story-maps-for-natural-resources/What-is-Biodiversity_.jpg
Click on the pencil to edit and in the Size settings, select Large.
Save your section and save your map.
Repeat the same steps to add the following photo: https://www.amnh.org/var/ezflow_site/storage/images/media/amnh/images/explore/ology-images/biodiversity/what-is-biodiversity/biodiversity-meaning/4079760-3-eng-US/biodiversity-meaning.png
Leave it with the original size.
4.2.3 Adding an immersive section
Click on the + sign, select Immersive. This layout allows for any type of media background and floating windows with text or media on top of it.
Click on the Add media button.
Select Link to Content. Paste the following link: https://sites.google.com/a/g.clemson.edu/clemsongeospatial/home/story-maps-for-natural-resources/istock-613678930.jpg
In the floating window, type:
Biodiversity is the rich variety of life on Earth.
Hit Enter.
Type:
There are 3 main levels of biodiversity:
Click the + sign, select Media, and paste the following link:
https://sites.google.com/a/g.clemson.edu/clemsongeospatial/home/story-maps-for-natural-resources/ABMI_whatisbiodiversity_Large.jpg
Save your section and your map.
4.3 Second section: Importance of Biodiversity
In this section we will add a title section to separate it from the previous section. We will then embed an infographic with an explanatory video, our interactive map, and finalize with another image.
4.3.1 Title section
To add a title section, scroll down on the story map and click on the + sign. Select Title.
Enter the following text: Why is Biodiversity Important?
Change the background image by clicking the Add media button. Select any photo you'd like from Unsplash.
4.3.2 Immersive section
Click the + sign and select Immersive. This immersive section will have three stops:
1st stop: Importance of biodiversity
Click Add media. Select Link to Content. Paste the following link: https://sites.google.com/a/g.clemson.edu/clemsongeospatial/home/story-maps-for-natural-resources/biodiversity_importance.png
Click the check button
In the overflow window, type text. Click the + sign.
Add media
Select Link to Content. Paste the following link; https://youtu.be/GK_vRtHJZu4?t=6
Remove the text from top.
Click the pencil button and change the background to transparent.
Save your map.
2nd stop: interactive map of freshwater bird species
At the bottom of the carrousel, click the + button to add another stop in the immersive section. Click Add media.
Go to the ArcGIS tab. In My Content, select Freshwater bird species.
In the overflow section, type: Freshwater Bird Species.
Click the + sign. Select Add media.
Go to the Link to Content tab. Paste the following link: https://sites.google.com/a/g.clemson.edu/clemsongeospatial/home/story-maps-for-natural-resources/legend_freshwater.PNG
3rd stop: static map of irreplaceable locations in the US
Click on the + sign, Add media.
Paste the following link: https://sites.google.com/a/g.clemson.edu/clemsongeospatial/home/story-maps-for-natural-resources/natureserve_rwr_hotspots_2013_final.jpg
Click on the pencil button. In the window that appears, check the Do not crop box under the Background setting. Choose white as the color of the background.
Save your section.
Save your map.
4.4 Overall settings
This section covers things like the header, logo, and social media links.
On the top left corner of your screen, click on the wheel to change your settings.
Press the pencil on the Logo section under Logo & Sharing.
Paste the following text under Link to Content: https://sites.google.com/a/g.clemson.edu/clemsongeospatial/home/story-maps-for-natural-resources/frog-ladybug-and-flower-graphic.png
Logo link: www.clemson.edu
Tagline: Your name or Our Natural Capital (your preference)
Click apply.
4.5 Sharing your story map
Your story map is private by default. In the top menu on the left, click the Earth button to make it public. Click the Share button on the top right corner to get the link you can share with others.
Your link should be something similar to this: http://arcg.is/1OHyHy
If you open that link in a new browser, you get the long URL:
You can also create an autoplay version if you add &autoplay at the end of your link: