Skip To Content

Create a Story Map Cascade

In this lesson, you want to create a simple guide that welcomes visitors to the City of San Diego, California. You want to give your audience an orientation to the main areas in the city and enable them to discover some interesting places. In the story, you'll use an existing web map of the city that shows some key neighborhoods and places of interest. You'll also use images provided by a photographer.

You'll create this visually appealing Story Map Cascade about key neighborhoods and places of interest in San Diego. A Story Map Cascade combines in-line content with beautiful immersive sections that fill the screen with your maps, images, 3D scenes, videos, and other web content. A Cascade is ideal for telling in-depth stories in a free-form structure that are very easy for your readers to navigate. All they need to do is scroll.

Start the Cascade Builder

The Story Map Cascade Builder allows you to include customized maps, photos, and text to give your customers an engaging and informative experience. For the purposes of this lesson, you'll use an existing web map of the city and images provided by a photographer.

  1. Go to the Esri Story Maps website.
  2. At the top of the page, click Apps.
  3. Scroll down to the section titled A Rich Multimedia Narrative and locate the Story Map Cascade template options.

    Cascade template

  4. Click Build.
    Note:

    The Cascade Builder is supported in Chrome, Firefox, Safari. Cascade stories can be viewed on any web browser.

  5. If prompted, sign in to your ArcGIS account and click Continue to Cascade Builder.
    Note:

    If you don't have an ArcGIS account, you can sign up for a free public account.

    Cascade Builder cover page

    The Cascade Builder opens with a cover page, which includes a placeholder cover photo.

    You're all set to start building your Story Map Cascade.

Configure the cover for your Cascade

Now you're ready to begin customizing your cover page. Your cover page is the first thing the audience will see, so you'll want to make it impressive!

  1. In the Enter your story title box, type Welcome to San Diego.
  2. For the subtitle, you can write your own or use this text: Discover this popular Southern California beach city.
  3. Click the Save button on the left side of the Cascade Builder to save your Cascade.
    Note:

    It's recommended that you add your own logo to the story's header so your audience can see who created it. To add your logo, click the Settings button. In the window that appears, click the Logo & Sharing tab.

  4. Click the Add your image or video button.

    The Media Picker opens so you can choose an image for your cover page.

    You can drag images directly into the Cascade Builder from your computer, or you can access images that are on the web, such as in photo hosting sites like Flickr. (It's important to ensure that you have permissions to use images from the web.) Uploading your own images into your story map is recommended for adding photos and other graphics so they will always be available. In this case, your photographer is already sharing the photos publicly in Flickr, so you'll access them from there.

  5. Click the Flickr tab and click Flickr account.
  6. In the Search for account box, type Esri Story Maps Demo and press Enter.
  7. Select the Welcome to San Diego album.
  8. Select any image from this Flickr album that you think would look good as the opening image in your Cascade, such as View over San Diego Bay.
    Note:

    If you want to try a different image, click the pencil icon in the lower left corner of the cover and click Manage > Change Media. You can also change the appearance of your title and subtitle on top of your cover image.

    Pencil icon

    Now that you're satisfied with your cover page, you'll create an introduction for your story map.

Add some introductory text and photos

Next, you'll start adding content for the first part of your story using text and in-line media.

  1. Click the arrow button at the bottom of the page.

    Arrow button

  2. Click the add button (+).

    Add button

  3. In the menu that appears, choose Text.

    Text

  4. Type some text to introduce people to San Diego. You can write your own, or use this text:

    San Diego offers a near-perfect "endless summer" climate, great beaches, a lively downtown, cool neighborhoods, and a generally laid-back feel.

    Plus there are miles of coastline, mountains, and a desert to explore.

    Let us introduce you to the city and help you discover some cool places along the way that you may enjoy.

    It's possible to format the text in your Story Map Cascade as headers, subheads, quotes, and alignment.

  5. Click inside a paragraph and click the formatting button to the left to change its appearance.
    Note:

    You can also format specific excerpts of text with bold, italics, underlining, strikethrough, hyperlinks, or different colors. When you highlight the text, a menu appears with these options.

    Format Text icon

  6. Click the add button (+) after the last paragraph in the text you just added, and choose Media.
  7. In the Media Picker, on the Flickr tab, which shows the same photo album you saw earlier, choose another image to represent San Diego, such as Sunset Cliffs.
    Note:

    While it's recommended that you use your own photos, or photos that your organization is sharing publicly, you can also use the Media Picker to search for images that are available for noncommercial or educational purposes. In addition to Flickr, Unsplash is a curated collection of free, high-quality photos. However, always make sure you check the terms of use and give proper attribution to the owner of the photos or other media.

  8. Point to the image that you just added.

    Notice that three icons appear. With the pencil icon, you can change the size of the photo, swap the photo out, or delete it. With the trash bin icon, you can quickly remove the photo. With the plus sign icon (the Add another image button), you can add additional images.

    You'll add some additional photos next to this one to create a gallery of pictures.

  9. Click the Add another image button.

    Add another image

  10. In the Media Picker, choose Downtown San Diego Children's Park.

    The Add another image button now appears to the right of your gallery.

  11. Add the image Balboa Park - Buildings and Gardens.

    Image gallery

    Notice how the photo sizing is handled automatically when you add multiple pictures.

  12. Click Your caption here and type a description for your new gallery, such as the photographer's name: Rupert Essinger / Esri.
    Note:

    If you are using another party's images, this is a good place to add an acknowledgment, attribution, or link to their site. If all your photos are by the same source, you could add that credit later in the optional credits section at the end of your Cascade.

  13. Click the add button (+) under the photos you added and choose Text.
  14. Type some more text about San Diego, such as the following:

    San Diego is located on the Pacific Ocean 120 miles south of Los Angeles and 20 miles north of Tijuana on the Mexican border.

    From Los Angeles you can get to San Diego in two hours, either by car or on the popular Amtrak Pacific Surfliner train service.

    You've introduced your narrative with some good photos and descriptions, but now you're going to add a map. This will start to give the audience a spatial reference for the landmarks they're seeing in the pictures.

Add a map

The best way for your audience to get a sense of where the landmarks are is through an interactive map.

  1. Click the add button (+) under the last text paragraph you added and choose Media.
  2. In the Media Picker, click the ArcGIS tab and click ArcGIS Online.

    ArcGIS tab in the Media Picker

  3. In the search field, type CreateCSDSanDiego owner:StoryMaps and press Enter.
    Note:

    If you already have the URL for a specific ArcGIS web map (https://www.arcgis.com/home/item.html?id=346b76ac939f474b80795b7a3427831c), you could also access it directly. You'd search for the ID part of its URL, in this case, 346b76ac939f474b80795b7a3427831c.

  4. Click the Welcome to San Diego web map owned by the StoryMaps team.

    This web map was authored in ArcGIS Online. The map appears in your Cascade and shows San Diego's location in Southern California.

  5. Point to the map and click the pencil icon in the lower left corner of the map.

    There are several options for customizing the appearance and behavior of your map in the Cascade, including size, views, and levels of interaction.

  6. Click the blue check mark in the lower right corner of the map to close this window.

    Blue check mark

  7. Click the add button (+) under the map and choose Text. Type some closing text for your introductory section, such as the following:

    Although probably best known for its coastline, San Diego County includes several mountain ranges. The Laguna Mountains, 50 miles east of the city, are popular with visitors for their sweeping views over Anza-Borrego State Park, a huge desert preserve that is the largest State Park in California.

  8. Save your changes.

    In the first section of your Story Map Cascade, you created a striking cover page, introduced the narrative and purpose, and added a reference map for the user to become familiar with the area. Now you're going to start a new section that gives more detailed information about San Diego.

Start a new section with text, title, and media

The next part of your Cascade is about Downtown San Diego, so you'll add a title and some text to introduce the city to your audience.

  1. Click the add button (+) under the last text paragraph you added and choose Title.
  2. For Enter a title, type Downtown San Diego.
  3. Click the Add Media button in the lower left corner of the title section you added.
  4. In the Media Picker, click the Flickr tab, and from the Esri Story Maps Demo account, open the Welcome to San Diego album.
  5. Choose an image of downtown to serve as the background for your title section, such as Downtown San Diego - Children's Park.

    If you'd like to change what section of the image is displayed, you can alter this in the Background settings.

  6. Click the pencil icon in the lower left corner of the title section and choose Background.
  7. Within the image preview to the right, click the blue circle and move it around the image until you find a display you like.
    Note:

    If you need to change the image, there is a Change media option on the Manage tab.

    Background image placement

  8. Click the blue check mark to close the Background panel.
  9. Click the add button (+) under the Title section.

    Add a narrative section

  10. Choose Narrative to add a narrative section, so you can add more information.

    Narrative button

  11. Type some text to introduce Downtown San Diego, such as the following:

    Start your visit to San Diego in the lively downtown. Here, next to San Diego Bay, you'll find the convention center, the marina, the baseball stadium, and lots of things to do.

  12. Click the Save button on the left side of the Cascade Builder to save your Cascade.

    These title breaks in the Story Map Cascade are a good way of breaking up your content into sections. It's clear now to the user that they'll be diving into more detail about San Diego.

Add an immersive section

An immersive section fills the entire screen. As your readers scroll through your story, the different views you defined in the immersive section appear along with an optional descriptive text panel. For example, each view could show a different image, or a different map, or a different location on the same map. You can define transition effects between views, too, so they are flexible for guiding your readers through a sequence of images, maps, or 3D scenes.

  1. Click the add button (+) under the last text paragraph you added and choose Immersive.

    The Cascade Builder changes to show you the controls for authoring an immersive section. Along the bottom of the screen you'll see a strip where you'll define the views in this immersive section. It contains the first view ready for you to author.

  2. Click Add Media to choose what your first view will display.
  3. In the Media Picker, choose one of the images of downtown from the Esri Story Maps Demo Flickr account Welcome to San Diego album, such as Downtown San Diego USS Midway.
  4. Floating over the photo you added, you'll see an empty text panel that says Continue your story here.

    Continue your story here text panel

  5. Type the text that you'd like to display next to this photo, such as the following:

    USS Midway Aircraft Carrier Museum

    In Downtown San Diego, don't miss the chance to go on the cavernous Midway! On the ship's huge flight deck there's a large collection of aircraft along with sweeping views of San Diego Bay, the downtown skyline, and Coronado Island. And you'll want to see the bridge and captain's chair! Photo: Rupert Essinger / Esri

    Note:

    If you don't see an empty text panel floating over the photo that you can type into, scroll up or slightly down and it will appear.

  6. Format your title to appear larger than the descriptive text.
  7. Click the pencil icon in the upper right corner of the text panel.

    USS Midway pencil icon

    A list of options that let you control the appearance and position of the text panel appears. For example, you can change the position of the text block so it floats over the right side of the photo.

    Your immersive section contains one view so far. Now you'll add another view to display another photo.

  8. In the strip at the bottom of the screen, click the add button (+) next to the one view it contains to add a another view, click Add Media, and choose a photo for this view, such as Downtown San Diego - Pantoja Park. Type some descriptive text for this photo in the text block, such as the following:

    Pantoja Park

    This peaceful park is a little oasis in downtown's Marina District. The park is surprisingly old: it was laid out in 1850. The statue of Benito Juarez was a gift from the Mexican government. Broadway's high-rises lie just beyond. Photo: Rupert Essinger / Esri

  9. Format the text and the text panel to look consistent with the panel for your first view.
  10. Click the Save button on the left side of the Cascade Builder.
  11. Click the View Story button.

    View Story button

    A preview of your Cascade opens in a new tab.

  12. Explore your story map.
  13. Close this tab to return to the Cascade Builder.

Add a map to your immersive section

As with the introductory section, interactive maps are a way for the user to become familiar with San Diego and the spatial distribution of particularly noteworthy landmarks.

  1. To add a new view, click the add button (+) in the strip at the bottom of the screen.

    Add button

  2. In the new view that appears, click Add Media.
  3. In the Media Picker, choose the ArcGIS tab.
  4. On the tab, select This Story if it is not already selected.

    The web map you already added to your Cascade is displayed.

  5. Select that web map again to use it in your view.

    Instead of displaying this map as is, in this view you want the map to show Downtown San Diego.

  6. Click the pencil icon in the lower left corner of the map to configure how it will appear in this view.
  7. Keeping the map centered on the label for San Diego, use the zoom in control in the lower right corner of the map (or press Shift while dragging a box on the map) until your map shows the Downtown San Diego area.

    Map zoomed to San Diego

    This extent of the web map contains some places and neighborhoods of interest to visitors to San Diego, and the ferry and trolley lines. The points of interest were assembled in Microsoft Excel spreadsheets and uploaded into the web map as CSV files. The other layers were created in ArcGIS Desktop and uploaded into the web map as shapefiles.

  8. Click the blue check mark to keep this map configuration.

    Next you'll add some text and a photo to the panel next to this map.

  9. You should see an empty text panel floating over your map that says Continue your story here.
    Note:

    If you don't see an empty text panel, scroll up or slightly down until it appears.

  10. Click in this text panel and type the text that you'd like to display next to this map, such as the following:

    Downtown San Diego

    Located on San Diego Bay, downtown is thriving. It's just a few minutes away from the airport. And beautiful Balboa Park is close by. Click the green points to discover some fun places, or keep scrolling down and we'll tour you around some of them.

    Note:

    If you include some text to tell people about the green points they can click, as shown above, you could format the word green with a green color to match the map.

  11. Click the add button (+) under the last text paragraph you added and choose Media to add an image to your text panel.

    Add an image to the map

  12. In the Media Picker, choose one of the images of downtown from the Esri Story Maps Demo account Welcome to San Diego Flickr album, such as Downtown San Diego - Children's Park.
  13. Under the photo, click Your Caption here and enter a caption:

    Children's Park, adjacent to the Convention Center

Add another view

When your readers keep scrolling down, you want the views of Downtown San Diego to automatically zoom in to show the Gaslamp Quarter. You'll add another view showing the same map and configure it to show that location.

  1. In the strip at the bottom of the screen, point to the last view that you added and click the Duplicate button.

    Duplicate button

    Duplicating a map creates an exact replica of the map (including the view and layers), making it easier to build sequences of views that tour readers around different locations on a map. If you added the map to a view in the Media Picker, you would need to specify your desired configuration for that map again.

  2. Click the pencil icon in the lower left corner of the map to configure how it will appear in this view.
  3. Zoom in on the Gaslamp Quarter. To zoom, you can double-click the map, use the zoom in control in the lower right corner of the map, or press Shift while dragging a box on the map.

    Map zoomed to the Gaslamp Quarter

    In addition to the green points of interest you see in the map at this scale, this map contains some additional layers, such as some interesting places to eat, and the light rail system. If you want, you can turn on one or more of these additional layers.

  4. In the list of layers in the upper right corner, turn on any additional layers you want to show at this scale, such as Food.
  5. Click the blue check mark to keep this map configuration.

    You've configured how you want the map to appear for this view. Now you can author the text panel for this view.

  6. In the text panel for this view, type some text for this view:

    The Gaslamp Quarter

    Welcome to San Diego's entertainment, dining, and partying hub. This is the most popular evening destination in downtown.

    Note:

    If you turned on an additional layer such as Food, you could also include some text to tell people about the blue points they can click, and format the word blue with a blue color.

  7. Click the add button (+) under the last text paragraph you added, and then click Media and choose a picture such as Downtown San Diego - Gaslamp to represent this location.
  8. Under the photo, click Your caption here and type a caption, such as the following:

    You'll find bustling restaurants, bars, and shops along Fifth Avenue immediately north of the convention center, starting at the Gaslamp Quarter sign.

  9. Repeat steps 1 through 8 to add another view that zooms in on Little Italy, which is the other downtown neighborhood that you want to showcase. It's located about 10 city blocks northwest of the Gaslamp Quarter.
  10. In the text panel, type the following text:

    Little Italy

    This neighborhood is a quieter, hipper alternative to the hectic Gaslamp Quarter, combining its Italian roots with some cool modern design and great restaurants. There's a large open-air market every Saturday morning.

  11. Locate and add a photo of Little Italy from the Welcome to San Diego album.
  12. Add the following text for the photo caption:

    Little Italy is centered along India Street, between Ash to the south and Hawthorn to the north.

    Now you'll add two more views showing pictures, with a slow fade transition between them.

  13. In the strip at the bottom of the screen, click the add button (+) after your last view to add a new view, click Add Media, and choose any picture of Downtown San Diego you like from the Welcome to San Diego Flickr album.
  14. Add the location name to the text panel for the picture.
  15. Repeat steps 11 and 12 to add another picture.

    You can choose different transitions between pairs of views (unless both views show maps).

  16. In the strip at the bottom of the screen, click the Choose Transition button for the last view you added.
  17. Choose the Fade Slow transition.

    Fade Slow

  18. Click the Save button on the left side of the Cascade Builder.
  19. Click the View Story button (above the Save button).
  20. Explore your story map, and then close this tab to return to the Cascade Builder.

    Congratulations—you've created a Story Map Cascade with two sections about the downtown area of San Diego. You would typically continue adding sections to the story about any other parts of the city that you want to feature, such as Mission Bay, Pacific Beach, and La Jolla. To add those sections, you would repeat the steps above, using the appropriate photos and displaying the map zoomed to those places. Optionally, you can add a credits section to the end of your story with photo credits and other information.

Share your story

When your story map is complete, you can share it with your organization or with the public.

  1. At the top of the Cascade Builder, locate the three sharing options.
  2. To make your story map public, click the Public button.

    Public button

    Before you start promoting your story map, go to the My Stories section of the Story Maps website. In My Stories, you can upload a thumbnail for your story and add a one-line summary description and search tags. These elements will make your story easier to find and look good in social sharing (such as tweets) and search results.

For inspiration, look at some of the examples in the Story Map Cascade Gallery. The gallery contains examples that showcase how you can use the Story Map Cascade app and illustrates effective design patterns and best practices. You can filter the gallery by subject or industry, or you can search by keyword. See if you can find some examples that match your interests or subject area. Get a feel for how information is conveyed in a Cascade, and what approaches work best with this app for effective storytelling.

In the next lesson, you'll build a Story Map Journal to introduce visitors to San Diego.