Skip To Content

Create a Story Map Journal

In this lesson, you'll create this Story Map Journal about key neighborhoods and places of interest in San Diego, California. Story Map Journals are useful when you have a long narrative that can be easily divided into distinct sections. Each section in a Story Map Journal presents a map, image, video, or piece of web content, with associated narrative text in a side panel. You can also define interactive actions, called story actions, for your side panel text. These story actions can change the web map when users click certain words or phrases. Your Story Map Journal will showcase some of San Diego's most popular locations. To build your Story Map Journal, you'll use an existing web map of the city and images provided by a photographer.

Start Map Journal Builder

First, you'll find the appropriate template on the Esri Story Maps website and begin a new Story Map Journal. Then, you'll choose a layout and title.

  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 Journal template options.

    Story Map Journal template

  4. Click Build.
  5. If prompted, sign to your ArcGIS account and click Continue to Journal Builder.
    Note:

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

    The Welcome to Map Journal Builder window opens. This window contains layout options for your Story Map Journal. It supports two layouts: Side Panel and Floating Panel. Floating panels are for shorter descriptions, focusing on and featuring the map more prominently. The story map you're creating will combine photos and maps with more extensive descriptive text about each location, so for the purposes of this exercise, Side Panel is the best choice.

  6. In the Welcome To Map Journal Builder window, confirm that Side Panel is selected. Then, click Start.

    Map Journal Builder layout options

    Next, Map Journal Builder prompts you to enter a title.

  7. In the Enter your title box, type Welcome to San Diego.
    Note:

    If an error message appears warning that an item with that name already exists, append your initials to the end of the title.

  8. Click the next button.

    The Add Home Section window opens.

Build a Home Section

Map Journals contain sections. The Home Section is the first section your users will see when they open your Map Journal. It serves as the introduction to your story.

First, you'll add an image to the Main Stage of your Home Section. The Main Stage pane is the larger display area to the right of the side panel. It can display a map, image, video, or web content. For your story map, you want the Home Section to display a photo that will appeal to your readers and encourage them to read your story.

You can drag images directly into Map Journal Builder from your computer, or you can access images that are hosted on the web. Images that you upload from your computer are automatically stored in your Map Journal story. Uploading images is the recommended way to add photos and other graphics to a story. In this case, your photographer has already shared the photos on Flickr, so you'll access them from there.

  1. In the Add Home Section window, in the Content options, choose Image.
  2. Click Flickr.

    Add an image from Flickr

  3. For the Flickr user account, type Esri Story Maps Demo, and click Load albums.

    A single album from this user account loads.

  4. Click the Welcome to San Diego album.

    All 33 images in the album are displayed. The one you choose will be the opening image of your Map Journal.

  5. Click the photo titled View over San Diego Bay (or any other image from the album that you think would look good as the opening image).

    Next, you'll choose the photo's position on the Main Stage pane. You can either crop the image to fill the stage, fit the image to the stage without cropping, stretch the image, or center the image. The Fill option is best for images that won't be negatively affected by cropping, such as photographs of places.

  6. Confirm that Position is set to Fill and click Next.

    The Add Home Section window prompts you to add content to the side panel, the area to the left of the main stage. You can type directly into the text editor or paste text in from other sources. While you'll add only narrative text to the side panel, you can also add images and videos.

  7. In the text box, type (or copy and paste) the following introductory 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.

    Side panel content

    Tip:

    You can format the text however you like. For example, you can use bold text for the first paragraph and plain text for the others.

  8. When you're satisfied with the text, click Add.

    Both the image and the text are added to Map Journal Builder.

    Home section

  9. At the top of Map Journal Builder, click Save.

    Save

    Your Home Section is finished.

Add a section for the San Diego area

Next, you'll add a new section to your Map Journal to introduce readers to San Diego and the surrounding area. This section will include a web map in the main stage and text and a photo in the side panel.

  1. At the bottom of the side panel, click Add Section.

    Add Section

    The Add Section window opens.

  2. For the section title, type San Diego: the second largest city in California.
  3. In the Content options, confirm that Map is selected.
  4. Click the Select or create a map menu and choose Select a map.

    Select a map

    The Select a map window opens. The default location to select a map is My Content, which contains content from your account. You can also search for maps from other sources, such as your organization or public content on ArcGIS Online. You'll use a web map that is shared on ArcGIS Online.

  5. Click the arrow next to My Content and choose ArcGIS Online.

    Choose ArcGIS Online

  6. In the search field, type CreateMJSanDiego owner: StoryMaps and press Enter.

    Search for maps

    Tip:

    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.

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

    This web map was authored in ArcGIS Online. It contains some locations and neighborhoods of interest to visitors to San Diego, as well as the ferry and trolley lines. Instead of displaying this map as is, you'll show a specific location on the map.

  8. For Location, click Custom configuration.

    Location Custom configuration

    The map loads, enabling you to pan and zoom to define the location you want to display.

  9. Zoom in so the map shows the San Diego region, the United States-Mexico border, and surrounding mountains.

    San Diego regional map

  10. In the Map Location box, click Save Map Location.

    Now, the current map extent will be displayed by default in your Story Map Journal. You can also change the map's content and pop-ups, but the default settings are fine for your purposes.

  11. In the Add Section window, click Next.

    Next, you'll add some text and an image to the side panel.

  12. In the text box, type the following information about San Diego:

    San Diego is located on the Pacific coast, 120 miles south of Los Angeles and 20 miles north of Tijuana.

  13. Press Enter twice to add two returns under the text.
  14. In the text editor toolbar, click the Insert an image, video, or web page button.

    Insert an image, video, or web page

    A window opens. It is similar to the window you used to choose the Home Section image.

  15. Click Flickr. Confirm that Esri Story Maps Demo appears in the text box, click Load albums, and choose the Welcome to San Diego Flickr album.
  16. Click the photo titled Sunset Cliffs.

    The Image caption field is automatically populated with text from Flickr, but you can edit or delete it. Always keep the photographer credit if provided.

  17. Click Apply.

    The image and caption are added to your text.

  18. Scroll down the text box and click below the new image and caption. Type (or copy and paste) the following text:

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

    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.

  19. Click Add.

    The section is added to Map Journal Builder. It introduces your readers to San Diego and the surrounding region.

    Introduction section

    Tip:

    After adding a section, you can edit it at any time by clicking the edit button at the top of the section.

Add a section for downtown San Diego

Next, you'll add a section that zooms in on the map to show your readers downtown San Diego.

  1. At the bottom of the side panel, click Add Section.
  2. For the new section title, type Downtown San Diego.

    The default map is still the Welcome to San Diego web map. For Location, the Custom configuration option is still selected, which indicates that the section uses the same location you chose earlier. You'll use the same web map but change the location.

  3. For Location, click Custom configuration.
  4. Keep the map centered on the label for San Diego and zoom to the downtown area, with the airport at the top left and Balboa Park at the top right.

    Downtown San Diego

  5. In the Map Location box, click Save Map Location.

    In addition to the green points of interest, this map contains layers that show ferry routes and certain neighborhoods. You can also turn on one or more additional information layers.

  6. For Content, click Custom configuration.
  7. In the Map Content window, check the boxes next to any additional layers you want to show, such as Food (which shows places to eat) or Trolley Lines.
  8. Click Save Map Content.
    Note:

    If you turned on additional layers, you may want to add a legend so users can more easily understand all the symbols. For Extras, you can check the Legend box to display a legend. For the purposes of this exercise, adding text in the side panel may be a more effective way to draw attention to the map's layers. You probably won't want to add a legend if you didn't turn on any other layers.

  9. Click Next.

    Next, you'll add text and one or more images to the side panel.

  10. In the text box, type some text about downtown San Diego. You can write your own or use the following example text:

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

    The Gaslamp Quarter is the big evening destination with restaurants, bars, and shops along Fifth Avenue and the surrounding streets.

    Little Italy is another popular neighborhood, combining its Italian roots with some cool modern design.

    Click the green points to discover some fun places, or blue points to learn more about some great places to get food.

  11. Add an image from the Flickr account you used earlier to represent downtown. Alternatively add separate images for the Gaslamp Quarter and Little Italy paragraphs.
  12. When you're finished adding images, click Add to complete the section.
    Tip:

    If you add a legend to your map, you can configure it so that it's open by default. To enable this setting, expand the legend. In the legend's upper-right corner, click the settings button. Check the Open By Default box.

  13. Save your Story Map Journal.
    Note:

    Layers that are turned on in a web map don't always appear in the legend. The web map author may have decided that certain layers will not appear in the map legend when they are turned on. For example, the trolley stations and trolley lines in this web map don't appear in the legend if you turn those layers on in the map.

    You've added a new section for downtown San Diego.

Add a story action

In your new section's narrative text, you want your readers to be able to click on place names such as the Gaslamp Quarter and Little Italy to navigate to them on the map. To add this interactivity, you'll author some story actions. Story actions can modify the map's appearance, display a different map, display an image, or jump to a different section in your journal.

  1. In your Downtown San Diego section, click the edit button to edit the section.

    Edit button

  2. In the Edit Section window, highlight the words Gaslamp Quarter.

    When the text is highlighted, the Story Actions options become available.

    Story Action options

  3. Click the Change the Main Stage content button.

    Change the Main Stage content

  4. If necessary, for Media, choose Map and select the Welcome to San Diego map.
  5. For Location, click Custom Configuration. Zoom to the Gaslamp Quarter neighborhood and click Save Map Location.
  6. Click Apply and click Save.

    The text to which you applied the story action is now underlined in the side panel. You'll test the story action.

  7. In the side panel, click the underlined Gaslamp Quarter text.

    The map navigates to the location you specified. Now that you have the map you want, you can add a pop-up that engages your audience and provides them with information about specific locations. Next, you'll edit the story action so a pop-up appears with more information about the Gaslamp Quarter when the user clicks the text.

    Note:

    After a story action changes what the audience sees in the main stage, the back button appears above the map. You can use this button to return to the previous view.

  8. Click the edit button.
  9. If necessary, highlight the Gaslamp Quarter text. Click the Change the Main Stage content button.
  10. For Pop-up, click Custom Configuration.

    The map is enabled and the Map Pop-up window opens.

  11. On the map, click the green point in the Gaslamp Quarter neighborhood.

    Gaslamp Quarter pop-up

  12. In the Map Pop-up window, click Save the Pop-up Configuration.

    Now, the Gaslamp Quarter pop-up will open when the user triggers the story action.

  13. Click Apply and click Save.

    You've added a story action. Optionally, you can repeat these steps to add an additional story action for Little Italy.

  14. Save your Story Map Journal.

Preview your Map Journal and share your story

Now that you've created a few sections and actions, you'll preview your Map Journal as it will appear to your audience. Then, you'll share it for others to see.

  1. At the top of Map Journal Builder, click View Story.

    View Story

    Your Map Journal opens in a new tab. It appears exactly as your audience will see it, with one possible exception. If you see status indicators in the header, they are only visible to you, the story map's owner.

    Preview Map Journal

    Your Map Journal only has three sections. Optionally, you can add more sections using the same web map to show other neighborhoods, such as Balboa Park, La Jolla, and the beaches west of Mission Bay (Mission Beach and Pacific Beach). You can also add a concluding section using an image in the main stage.

    You can change the appearance of your Map Journal using the settings button at the top of the builder. If you were going to publish and promote this Map Journal, you might use the Header tab in the Settings window and upload your agency's logo to your story. For the purposes of this lesson, however, your story map is complete. Next, you'll share it with others.

  2. Close the preview and return to Map Journal Builder.
  3. At the top of the builder, click the Share button.
  4. In the Share Your Story window, change the privacy setting to Public.
  5. Close the Share Your Story window.

    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 when you share your map via social media.

Your Story Map Journal is completed and shared. It introduces your audience to San Diego through the use of images, maps, and interactive text. For inspiration, look at some of the examples in the Story Map Journal Gallery. The gallery contains examples that showcase how you can use the Story Map Journal 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 Map Journal, and what approaches work best with this app for effective storytelling.