Creating a Story Map
Specify a title, tags, and a summary for the new web app as below:
Title: COVID-19 Geographic Analysis by **YOUR NAME**
Tags: COVID-19, Coronavirus
Summary: A story map of COVID-19 cases and latest trend plot across the world
Make sure the box next to Share this app in the same way as the map (Everyone, Clemson University) is checked. Then click DONE.
If you have already closed your map before starting this section, you can go to www.arcgis.com, log in, go to the Content tab, and click the Create button.
2. Story outline
It is important you spend time thinking about the outline of your story map before jumping on the technology. Here are some questions you should answer to build your story line:
- What is my purpose?
- Who is the audience?
- Do I want to inform them, make them draw their own conclusions, or explore the data?
Think about what you want your audience to get from your story. How you want to draw them into reading more and scrolling down once they opened your story. Once you answer these questions, grab paper and pencil and draw your storyline. How many sections? Where do I use a map and when do I use a chart?
Spend time on this part of your creative process. It will pay off. Here is a screenshot of my process.
One of the most critical points of your story map is how you start your narrative; your landing page! This is when your audience decides whether they want to continue with your story or not. Therefore, it is very important to choose titles and graphics that are intriguing and interesting. Now, let's start the story.
Title: Change your title to COVID - 19.
Subtitle: A Geographic Perspective.
Background: Click on Add your image or video. Select Link to Content . Copy and paste the following link: https://sites.google.com/a/g.clemson.edu/clemsongeospatial/cloud-mapping-and-story-maps/creating-a-story-map/CoronaVirus-1080x675.jpg
Click on the checkmark to the right of the box. Notice how the background changes.
Save your map by clicking the disk button on the top left menu.
Notice your landing page (or cover section) added to the carrousel under this menu.
4. Adding story map sections
At the bottom of the landing page, click the down arrow to add a section to your story map.
Before showing any interactive map, it is important to give an overview or general sense of the story map. In our case, we will add some narrative explaining the topic.
Copy and paste the following text:
On March 11, the World Health Organization held a media briefing and declared the COVID-19 outbreak a global pandemic.
The following day, Dr. Michael Ryan, WHO Informal Advisory Group member, warned:
"All countries need to review their strategies now".
Let's look deeper at the geographic distribution of cases. Below is a simple, yet effective map that highlights the regions who have been or become epicenter of this pandemic.
Tips for working with text in story maps:
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 online experience. 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/
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.
The Living Land |Our Future Climate in Samish Traditional Territory | The Human Reach: Atlas |Blue Planet II: Deep Dives
Here is an example of the story map you will be creating during this session.
There are several ways to create a story map: directly from your interactive map, from your Content menu, or from the web: https://storymaps-classic.arcgis.com/en/
Creating a Story Map from your Saved Map
If you haven't closed your map, click on Share again. In the Share pop-up window, click on CREATE A WEB APP.
Now, click on Configurable Apps, click on Build a Story Map, and choose Story Map Cascade.
To separate paragraphs, hit Enter.
To format font (color, bold, Italic, underline, hyperlink), highlight the text you want to change.
A text toolbar appears as shown on the image on the right. To change the color of your text, for example, click the brush and select the color of your choice.
To format a paragraph, click on the round paragraph symbol that appears to the left of your text. You will be able to align the text, and change its size.
For more advanced features, follow HTML standards.
Save your story map.
Section 2: World View
In this section of our story, we will show the worldwide spread of the Coronavirus. That is the first map you created--which is automatically the first section after your landing page. If that is not the case (maybe you started your story map based on a different map), then follow the steps below to change the map.
Click on the plus sign. This time we will add an Immersive section.
Click the Add media button. Select the ArcGIS tab.
Under My Content, you should
see a thumbnail of the interactive map you created in the previous section (Coronavirus cases by your name). Click on that map to add it to this section.Notice the floating window. Type: Red circles display confirmed cases of COVID -19. Change the color of the text red circles to be the same red as the ones on the map.
Make it a small window with transparent background (see image on the right).
Save your story map.
Now, let's add another section.
Click on the + sign. Select Title. We use this setting to separate sections of our story map.
For title, type Europe. Change the background by clicking the Add media button on the bottom left corner.
Select Link to Content. Paste the following link: https://sites.google.com/a/g.clemson.edu/clemsongeospatial/cloud-mapping-and-story-maps/creating-a-story-map/CoronaVirus-1080x675.jpg
Now we will add an Immersive section that focuses on Europe. We will use the same map that you created before with the worldwide data, but with a different extent, zooming in Europe.
Click on Add media. Select the ArcGIS tab. Click on the map you created earlier to add it to your section.
To customize this map, on the bottom left corner, click on the pencil symbol (see image to the right).
Zoom into Europe and click the blue Checkmark to save the changes.
In the pop-up window, we are going to embed a youtube video.
Add a couple of letters to add some text so that the + sign appears.
Click on the + sign and select Add media.
Go to the Link to Content tab. Paste the following video: www.youtube.com/embed/nXDx-FZHRbc
Press the checkmark.
Notice your story map has a warning sign (brown warning exclamation sign).
Click on the Mobile tab. Add an alternative image that appears instead of the video for people watching your story map on a mobile device. For example, go to Unsplash, type Virus in the search box, and select a photo of your choice.
Save the content of the floating window.
Save the content of this section.
Save your map. Preview your map by clicking the eye symbol on the top left corner.
Section 4: United States of America
In this section, we will focus on the USA. First, add a title section that has the same background as the one for Europe. Enter United States of America as title.
Then, add a new immersive section and use a map created by another user in our organization.
Go to the ArcGIS tab, and search for CoVID - US map within Clemson University Organization. Select CoVID -19 Cases by County.
Save your story map.
Section 5: How can you help?
Following previous steps, add a new title section called: How can you help? Use the same background picture as the other titles.
Insert the following text:
The rate at which a population becomes infected makes all the difference in whether there are enough hospital beds (and doctors, and resources) to treat the sick.
In epidemiology, the idea of slowing a virus' spread so that fewer people need to seek treatment at any given time is known as "flattening the curve."
Then, embed the following image: https://www.ucsf.edu/sites/default/files/styles/half__image/public/2020-03/flattening-the-curve-V7-04.jpg
Continue with more text:
‘Social distancing’ refers to avoiding close contact with other individuals in order to avoid catching the virus yourself and to avoid passing it on.
Finish with a quote:
The best response to the Coronavirus is altruism, not panic. Richard Friedman, The New York Times
Section 6: Credits
Add the following text to your credit section (customize it as you see fit):
This story map was created by the Clemson Center for Geospatial Technologies as a teaching tool. Special thanks to Johns Hopkins University and Esri for making the COVID-19 data readily available to our community.
Content: COVID -19 Real-time cases. Author: Johns Hopkins University. Link: https://www.arcgis.com/home/item.html?id=bbb2e4f589ba40d692fab712ae37b9ac
Content: The Best Response to the Coronavirus? Altruism, Not Panic. Author: Richard A. Friedman, The New York Times. Link?
https://www.nytimes.com/2020/03/08/opinion/coronavirus-altruism.html
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/cloud-mapping-and-story-maps/creating-a-story-map/Logo_heart.png
Logo link: www.clemsongis.org
Tagline: GIS for Good
Click Apply.
6. 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.
Check your story map on your cell, email, or social media.
Congratulations! You just created your first story map!!
For those of you on the social media side of things, we would love to see your story map that you just created on our Twitter (@gisclemson) account.
Additional Tutorials and Resources
ArcGIS Online lesson with Covid data from ESRI
Exploring COVID-19 Impact on Vulnerable Populations Using Infographics
Using the Coronavirus Infographic Template in Business/Community Analyst Web
Monitoring COVID-19: A Dashboard
Johns Hopkins Coronavirus Dashboard
