Visit Part 1: The Connecticut’s Changing Landscape Story

Why did we make a story map? Because a story map

is visually appealing and catchy, is easy to understand AND information rich, guides the reader while allowing for exploration and is an interesting, multimedia experience.

The goal of this blog (Part 2) is to share some of the “how” when creating the Connecticut’s Changing Landscape story map, including rules of thumb, tips, tricks and a bit of “how to.”  Although some of this may be obvious to experienced story map authors, hopefully it will help some folks get started and others to move their story map to the next level.  Here goes.

Steps in creating this story map journal:

– brainstorm and mockup – powerpoint works well, or good ol fashioned pencil and paper
– assemble data, do geoprocessing and data analysis (plan ahead with your attributes – they may be used for links or symbology down the road)
– create map documents with symbology
– create map services or feature services (if necessary)
– create ArcGIS Online map(s) (AGOL)
– create story map journal in AGOL (start here, not inside AGOL)
– add maps, text, graphics, photos, links, etc.
– customize if desired (see the next blog)
– review, edit, review, edit … publish and share!

 

General Suggestions

The front page should be catchy. Visit the gallery of the best story maps, and the front is always gripping.
Keep it under 15 “pages.” And fewer is better. Jumping to “page groups” is too much in most cases and this happens (right).
People love factoids.
Claim authorship.  There is no formal place for an author or organization. Be sure it is somewhere with a link. Readers don’t want to be left begging for more with no where to go.
Keep it simple.  This is harder than it sounds but critical in capturing a reader.  Link to nitty gritty details later, but for the story, boil it down to only what is most important.

Technical Suggestions

Don’t lose viewers by linking out of the story map until the very end.  Use the Main Stage Actions instead, see below.
Make the graphics transparent pngs when possible.  It may not seem like a big deal when the image background is the same as the page background, but shrink it or view it on a mobile device and the background of the story map becomes semi-transparent.  If a graphic isn’t a transparent png, the rectangle of your image stands out like a sore thumb.
If the legend is critical, make it a graphic within the text. A screen capture from AGOL or ArcMap works.  Assuming people will (1) find the legend on the map, (2) look at it AND (3) understand it is likely a stretch.  Of course, these screen-captured images have to be online somewhere.  If you don’t have access to a web server, I suggest flickr or google.  They will create a unique URL for each image that can be added to the story map panel.
Use the html code editor. Too many changes in formatting gets things all confused.  When this happens, a little code cleanup is necessary.  Get to the code by clicking on the Source button when editing a page.

Look for the span tags – multiple spans with conflicting messages cause the confusion. So delete the whole span thing, starting with <  and ending with > . Example underlined below.  Do it carefully – every character matters.

Once you are comfortable, you can change other things in the code too, like the name of an image.  As Esri puts it .  Click the Source button again to get out of the code.  Also notice the button to the right of the Source button, called Maximize.  This makes the code window bigger and it is much easier read that way.  Click Maximize again to minimize.  Ha.

Use the stage options.  They move a story map from good to great.  From the side panel, these change what happens on the main stage. For example, a link in the side panel can change the map, the map extent, the layers that are on, open a web page or pdf, show a video or an image.  Find the Main Stage Actions under the Side Panel tab when in editing mode.

There are four choices: map, image, video, web page .  This is awesome.  So that website or pdf that you want to link to? Add the link here and it will open INSIDE your story map, with context and you don’t lose your reader.

I used the Stage Options a lot with maps, especially the map layers and map extent.

   

ArcGIS Online (AGOL) Tips

Keep the number of AGOL maps to a minimum.  I am talking about the maps you save in AGOL using the map viewer. Keep it to just one if possible. If for no other reason, this is for map extent consistency. If someone zooms in on a map, the extent will stick as the reader changes maps and pages.

When I started my story map, I did not understand this and I had a LOT of maps.  Once I figured out that there was some desire to have fewer, I combined them and ended up with seven.  If I had to do it again, it would be even fewer.  I found it difficult to keep track of all the layers in an mxd, then map serivce, then AGOL map, then story map page.  I finally made a diagram.  It looks cool so I included a little shot of it here (right).   But, obviously, it got complicated quickly.

Pop-ups.  Pay attention to them. They allow the reader to dig deeper.
– Disable popups for layers that are irrelevant. Enable and format those that are.  Find disable/enable in AGOL with those blue dots under the layer name (More Options) and click to Remove Popup or Enable Popup.
– Use the customize popup options and insert attribute values.  I think this is the best of all pop-up worlds.  Do this in AGOL, those blue dots again, Configure Popup, choose “A custom attribute display” then the Configure button.

Inside the pop-up editor, that Add Field Name symbol adds information from the attribute table.  Brilliant.  Below is a sample of one of my customized pop-ups. Everything in { } is coming from the table via the Add Field Name option.  I also bolded some things, changed the colors, added some text, etc.  The popup result from this customization is shown above, or find it in the story map, page 3, after clicking on a town.

– Use the Configure Attributes link to change those darn decimal places.  Find the link under the big, green Configure button (graphic above).
– Use table attributes to build URLs and/or to populate images and graphics.  I won’t go into this here and if you don’t know what that means then move on, but using {  } when building links in popups can be slick.

 

I could go on but I will stop there.   Remember that a story map and each step in its creation is an iterative process.  For more on customizing a story map, read the next blog, Part 3: Customizing the Connecticut’s Changing Landscape Story Map.

 

Connecticut’s Changing Landscape Story Map | Esri Storytelling with Maps Contest Winners Esri Story Maps

---