ArcGIS StoryMaps

Quick tips for mastering the ArcGIS StoryMaps builder

Updated October 8, 2020: Whether you’re new to ArcGIS StoryMaps or have been using it since its days in beta testing, there’s always room to improve your storytelling skills. This list of short, simple tips will help you get the most out of the story builder, especially when it comes to smaller features you may have overlooked. I’ll be adding more tips periodically, too, so be sure to check back every now and again if you find these tidbits helpful. Use this table of contents or keep on scrolling to learn how to:

Adjust your story’s look and feel

 

Work with media, generally

 

Work with maps, specifically

 

Fun with immersive blocks

 

Share your work

____________

 

Adjust your story’s look and feel

Branding can be an important element of a polished story, and nothing more clearly shows off your brand than a logo. If you want, you can have your logo appear in the header of your story or collection, right next to the title, so it’s always visible as readers scroll through your narrative.

To do this, enter the builder for your story or collection and click Design in the header. At the bottom of the design panel you’ll find the option to upload a logo; click the + and select your desired image. Once it’s uploaded, you’ll see it appear in the top corner of your story/collection. You’ll also see additional fields appear at the bottom of the design panel—use these to add alternative text for your logo and to link it to a website of your choosing.

 

 

Add media to a minimal cover

The minimal cover is a great option for how-to articles, thought pieces, or press-release-style updates. For these kinds of stories, the subject is what will hook your readers most, so a big, dramatic cover image can be overkill. But, if you want to keep the emphasis on your title and still add a little visual flair, you do have that option.

In your story, open the design panel, select Minimal from the list of cover options, and close the design panel. Above your title, in the upper right corner of your story, you’ll see + Add cover media. Click it to upload a photo or video. Your media will display in a panoramic aspect ratio; for images, you can open the Properties menu and move the focal point to the area of the image you want to be visible across screen sizes.

 

 

Hide a story’s published date

While the StoryMaps builder will automatically update the date in your story’s cover every time you publish, you have the ability to hide this information if you’d prefer. This can be useful if you’ve made an evergreen resource that will stay relevant no matter how many weeks, months, or years have passed since you created it.

To remove the published date from your cover, open the story builder and expand the More actions menu in the story header. From there, select Story settings and simply check the box to hide the date on the cover. Click Save and poof, the date will vanish, but you can add it back any time.

 

 

Customize text color

Sometimes you need to draw your readers’ attention to a specific word or phrase in your story text, and want to use a splash of color to do so. This can be especially useful for calling out important statistics or explaining different categories on a map. As of January 2020, this is now possible in ArcGIS StoryMaps, with an update in July that enabled coloring of headings and subheadings, as well.

To change the color of any kind of text (with the exception of a quote block), highlight it in the builder and select the palette icon from the text editing menu. The dropdown that appears has four recommended color options: The first is the standard text color for your theme, while the others are the theme-specific recommended accent colors. If you’ve added a custom accent color in the design panel, that will also appear as a fifth option. Need an entirely different color? Just enter its hex code et voilà!

 

 

Add credits to the end of your story

Open the story builder and scroll down to the end of your story and you’ll now see a section for story credits. You can use this space to provide more information about the author or organization behind the story, provide links to the data used in it, list photo credits, or anything else you can think of. Simply highlight text anywhere in this section to hyperlink it.

If you don’t enter anything in this section it will be hidden in the published version of your story. If you do add content here but aren’t sure whether or not you want to show it to your audience, you can toggle the credits section on and off from the design panel. Hiding the credits section will preserve any content you’ve already added, so no need to worry that you’ll have to redo that work if you choose to display the credits later.

 

 

Enable story navigation

For longer stories, or for those that don’t necessarily need to be read linearly, it’s nice to provide readers with an easy way to hop between sections of the narrative. Story navigation makes this possible, using heading blocks you’ve added to provide points to which readers can jump. Toggle on this option in the design panel. If you’ve already included heading blocks, the builder will automatically add links for them (up to 10) in a navigation bar that appears just below the story header. If you don’t have any headings in your story, the bar will appear with text prompting you to add some. Note that, at this time, navigation only detects headings in the in-line portion of your story, not those that appear in immersive block narrative panels.

Click Properties on the navigation bar to customize the text for each nav link, or to choose which links you want to display. If you decide to turn off story navigation in the design panel, then toggle it back on later, any changes you made in the properties panel will be preserved.

 

 

Start a new story with a custom theme already in place

If you’re about to begin work on a new story and you have a custom theme in mind for it that you’ve already made with the theme builder, you can start a fresh story from scratch with that theme already in place. Just navigate to your themes page, then find the card for the theme that you want to use. Click on the three dots in the lower right corner of the card to access the Quick actions menu, and you’ll see that one of the options is Start a new story. Select that to jump into the story builder with a blank, but already-themed story.

 

____________

Work with media, generally

Add alternative text to your media

Making your content accessible is an important part of authoring inclusive stories. That’s why we’ve designed StoryMaps to meet common accessibility standards. We’ve also included features to help authors cater to individuals using assistive technology like screen readers. Alternative text is one of these features—you should use it to describe any functional media in your story so that those with visual impairments can still follow along.

Adding alternative text to any piece of media is simple. Just open the Properties panel for that piece of content (you may need to hover over it to reveal the media toolbar) and the field to enter your description is front and center. Click Save when you’re done and you’re good to go.

 

Set the focal point for images and videos

When you add photos or videos to your story’s cover or immersive blocks, the asset automatically fills the container it’s given. Depending on the screen size of a reader’s device, this means they may not always see the full media. If there’s a key area of your photo or video you want to remain visible (like a person or the most dramatic part of a landscape), open the Properties menu on the media and click on the area you want to stay visible across devices. You’ll see the focal point indicator and media previews adjust to reflect your selection. (You can also select the Fit option instead to ensure the entire image or video is present across all devices.)

 

Add attribution for media in the cover or immersive blocks

Make sure credit is given where it’s due by always providing creator and/or source information for the images and videos you use in your stories. For inline media, it’s easy to do this in the caption. For media in the story cover or immersive blocks like slideshow, sidecar, and guided tour, you can add an attribution through the media’s Properties panel—just add the necessary text to the attribution field found there. Note that you can also format an attribution with bold or italic text, or add a hyperlink to it. When you’ve finished, you’ll notice a little (i) now in the upper left-hand corner of the media. Clicking on that will reveal the attribution info.

 

Replace media instead of deleting it entirely

Say you’ve positioned some media (a photo or video) just where you want it within a story or immersive block, and have written up a thoughtful, illustrative caption for it, but you come across an even better picture or video afterwards. Instead of deleting the media outright and starting over from scratch, you can simply replace just the media item itself, preserving the block size and any caption (though attribution and alternative text will need to be re-entered). Simply click the button with three dots that appears when hovering over a piece of media and select Replace image/video, as the case may be.

 

Specify the height of embedded content with iframe code

When embedding external web content in your story, the story builder will automatically set the size of any content you add. However, when adding embedded content as an iframe, you can use height and width parameters to ensure your content displays at your desired aspect ratio. This is especially useful if you have tall content—like a form where you want the full list of questions to appear without the reader needing to scroll within the embed frame.

The width of the iframe you add is controlled by the block size you select, but you can specify your content’s height or aspect ratio if you’d like it to be something other than 16:9 (the ratio the builder automatically uses).

Here’s an example of an iframe code with height and width parameters set manually.

 

 

In the code snippet above, the author has chosen to define an aspect ratio of 3×5 for their dashboard; they could have also done this by using set pixel amounts or percents for both height and width (so long as their units match).

To adjust only the height and of your content, set the width to 100 percent, and specify your desired height in pixels:

 

 

Customize the cards and small screen appearance for your embeds

If you’ve embedded web content and displayed it as a card in your story, you can customize the thumbnail, title, and description. To do this, hover over the card and select Properties. In the panel that appears, you’ll see a preview of the card as it is configured currently, as well as fields to adjust the text and a button to upload a new thumbnail image. As you make changes to these elements, the card preview will update to reflect them. You can also use the arrow next to Card details to restore the information originally provided by your external content’s metadata.

If, instead of a card, you’ve chosen to display your embedded content live, you’ll notice a few more options in the properties menu. At the top of that panel you can choose how your embed will appear on small screens and mobile devices. If you select Card, you’ll have all the options to adjust those card details that I just mentioned. If, instead, you choose Image, you can choose some alternative media (like a screenshot of the live embed) to appear instead. Just click Save to commit your changes when you’re done. You can see how this embed will appear on different screen sizes by taking advantage of the story preview, accessed via the builder header.

 

 

Copy the reference for embedded web content

If you’ve embedded web content into your story and want an easy way to retrieve the reference you used to add it initially—maybe you want to tweak the iframe parameters, or move the content to an immersive section—you can grab this info right within the builder. Simply open the Properties menu for the embed and click on the Properties tab within it. There you’ll see the reference used to draw in that content, and a handy button to copy it to your clipboard.

____________

Work with maps, specifically

Toggle your map legend on or off

Some maps display a variety of data, so your readers will need a legend to make sense of what’s what. Other maps, meanwhile, are nice and straightforward, and it can be nice to hide the map legend in these instances to reduce visual clutter.

Turning a legend on our off is the same whether you’re configuring a web map, 3D scene, or an express map. Start by opening the map designer and navigating to the Settings tab of the side panel. There, you’ll see a switch to show or hide the legend; simply toggle it on or off depending on your map needs. Your map will update instantly to reflect this change.

 

 

Disable map navigation

If you’ve added a map to your story and want readers to be able to click on pop-ups or see real-time data, but you want to keep their attention focused on a particular area, you can always disable map navigation. This setting locks down the map extent, preventing readers from panning or zooming, and is available for any express map, web map, or 3D scene. To disable map navigation, open the map designer and navigate to the Settings tab. You’ll see Allow map navigation is automatically toggled on—simply click the adjacent switch to turn it off.

 

Adjust layer names for the maps in your story

Have you ever wanted to adjust the layer name as it appears in a map legend for a particular story, but not have that change affect the map in other places? Maybe the layer name is really long, or the story is for a particular audience that’s used to specific terminology. Whatever the reason, customizing map legend terms in your story maps is 100 percent possible.

To adjust the name of a specific layer, open the map designer and locate that layer in the Map layers tab of the side panel. Click on the layer name to activate the text editor, then rename that layer however you like. If your legend is turned on, you can see the new layer name appear right there in the map designer; your readers will also see it once you publish your story. Click Place map to save your changes when you’re done.

 

 

Change an express map’s basemap

The style of express maps is automatically synced with your story’s theme, so you can always be confident that they’ll harmonize with the rest of your content. But did you know you can choose from a multitude of basemaps when creating one of these simple maps?

To change your map’s basemap, open the map designer and navigate to the Settings tab on the side panel. At the bottom you’ll find a basemap picker. Inside, you’ll see three theme-based basemap options, plus a catalog of other in-house choices. Or, click Browse more maps to access your own library of web maps or ones that you’ve favorited, web maps that have been shared within your organization, plus the deep font of content available through the Living Atlas. When you’ve settled on a basemap, click Done to save your express map.

 

Reorder numbered points in an express map

Say you have an express map with five numbered points representing places you visited on your latest vacation. You added the points for each place in the order in which you visited them, but now you’ve changed your mind and want the numbers to serve as a ranking for enjoyment at each destination. Don’t panic, there’s no need to delete your points and start over. In the Map layers tab of the map designer’s side panel you’ll see your points listed with point one at the top and point five at the bottom. To reorder your list, click and drag the point name for each place, dropping them into your preferred sequence. The numbers for each point on your map will update as you make changes in the side panel, and all that pop-up information you already added for each point is preserved just as you had it.

 

 

Change annotation styles in express maps

You can refine the look of your express maps not only by adjusting the color of drawn points, lines, and areas, but by changing the style of text annotations and arrows, too. To change an annotation’s style, select it, then use the options available in the panel that appears. For arrows, you can adjust the color and choose between a solid stroke or two dashed options. For text annotations, you can choose between a light, dark, or transparent background for your text, as well as adjust the stroke of leader lines if you’ve included them.

You can set the look of each annotation individually, but if you’d like to apply the same styling to multiple annotations, save yourself some time by holding Shift on your keyboard, selecting all the annotations you want to look the same, and then making your style adjustments. Because the styling options differ depending on whether you’re working with arrows or text, this multi-select shortcut only applies when all the annotations you have selected are the same type.

 

 

Add search and current location widgets to maps

If you have a map that’s packed full of data, you might want to invite your readers to explore it in greater detail, starting with the places that are most relevant to them—whether that’s wherever they happen to be at the moment, or a location that holds a special place in their heart. Either way, as an author you have the option of adding two widgets to your maps that make this exploration easy: search and current location.

To turn on either (or both) of these widgets, open the map designer and navigate to the settings tab of the side panel. From there, simply toggle on the widgets of your choosing and place the map to save these changes. The search widget will appear in the upper left corner of the map, while the current location widget will appear above the map’s zoom controls.

 

____________

Fun with immersive blocks

Hide a slide in an immersive block

As you’re working on an immersive block in a story (whether that’s a sidecar, slideshow, or guided tour), you may find yourself wanting to temporarily remove a slide from the published version without losing that content entirely. In these instances, hiding that slide is the solution you’re after. To do this, expand the slide panel for your immersive block and click the … menu on the thumbnail of the slide you want to conceal. Click Hide and you’ll notice the thumbnail change in appearance to indicate the slide is now hidden. As you move through the immersive, you’ll also see how that content is seamlessly skipped over. If, at any point, you want to add it back into the mix, open the same menu, click Show, and the slide will appear again, just as it was when you first hid it.

 

 

Change the style of a slideshow’s narrative panel

When you add a slideshow to your story, you might notice that the narrative panel background and text color are designed to match your current theme. But there may be instances where having a fully transparent panel background, and either light or dark text, may be the better design choice for a particular slide. The narrative panel style options for slideshow, added in our January release, give you this ability.

To change your panel style, click the dropdown at the top of the narrative panel. The themed style is (of course) already selected, but you’ll find two transparent background options just below it. You can set these styles individually for each slide in your slideshow, depending on what style works best for the content in the media panel.

 

 

Adjust the width of sidecar narrative panels

Sometimes, when authoring a sidecar, you might want to give your narrative text more space. Good news—in both layouts, you have the option of adjusting the narrative panel width. In the docked panel layout, click Change panel size (the double-headed arrow button sitting on the border between the media and narrative panels) to toggle between the three available sizes: small, medium, and large. These sizes are also available in the floating panel layout; find them under the style menu at the top of the panel.

 

Use a web map or Living Atlas map as the basemap for a map tour

You can customize a map tour experience by choosing a web map or a map from the Living Atlas to use as the basemap. Just enter the map settings and click the thumbnail beneath Select basemap to get to the basemap picker. You’ll see the standard list of Esri basemaps, but click Browse more maps to access your own library of web maps, web maps shared within your organization, and maps from Esri’s Living Atlas. (Note that pop-ups for any of these options will be disabled when used in a map tour.)

 

When adding points to a map tour, save some time by using the search tool instead of manually panning and zooming to find the right spot. While in the tour point location selection map, type an address or point of interest into the search bar in the upper right-hand corner and click the desired result to jump to that location on the map (wait for results to load fully to ensure you’re clicking on the right result). Then click Add to map to do just that! You can also use search to add non-numbered points to express maps.

 

Skip the media in a map-focused guided tour

You may be familiar with the two available layouts for guided tour: map-focused and media-focused. What you may not know is that the map-focused layout is so focused on the map that media is optional. You can make an entire tour without any photos or videos, or simply skip the media component for a handful of tour stops. No media, no problem; the media panel will be hidden for any tour places without this content and your tour will still look great.

 

Upload geotagged media to place a map tour point

Some images and videos, especially those taken with a smartphone or other mobile device, come with geographic attributes—the coordinates where the photo was taken—embedded in their data. Uploading such media into a map tour will automatically initially place the point for that media at that location (a tooltip on the upload screen will inform you when the image or video has locational information). Keep in mind that you can always manually move the point later, if you wish. Also, note that adding geotagged media to a point that has already been manually placed will NOT overwrite that location.

 

Switch seamlessly between guided and explorer map tour formats

Released in September, 2020, explorer tour gives storytellers more latitude than ever when it comes to immersing your readers in a geographic journey. However, this power also opens up the question of whether to use explorer, or its complement, guided tour. The good news is that it’s not a permanent choice—it’s actually remarkably easy to switch between the two map tour formats. In any map tour, click the gear icon at the bottom left of the slide panel and you’ll see a change layout option. Select it to not only change between the layouts of your current tour format, but to switch to the other format entirely without losing any of your tour points or their attributes! (Guided tour will automatically order the points based on their order in the map tour, and vice versa).

 

Fit or fill images in a swipe block

As with other forms of media in the StoryMaps builder, when configuring an image-based swipe block, you have the choice to fill the block with the two images (meaning they will be cropped in some way), or to fit the entirety of both images into the block, which will adjust their sizes accordingly. Just click the gear icon over the block to see these options in the block’s properties menu.

Note that the fit/fill choice applies to the entire block, and that, unlike other forms of inline and immersive media, there is no option to set a focal point for images on the fill setting; they automatically center themselves in the middle of the block. If you select fit, you will also have a selection of background colors to choose from for the portions of the block that the image doesn’t cover.

 

Drag and drop immersive blocks

Say you’ve added a sidecar or guided tour in your story, filled it with content, and then realized you actually want it to come much earlier (or later) in your narrative flow. Don’t panic—you can easily move entire immersive blocks just like you would a media item or button. With the slide panel expanded, grab the little handle in the bottom left, then click and drag the immersive-turned-thumbnail to your desired location and release. Boom, immersive bock relocated.

____________

Share your work

Add Insights pages and other item types to a collection

ArcGIS StoryMaps has the ability to include several more types of ArcGIS items in collections beyond just stories. One of the most interesting is ArcGIS Insights pages. ArcGIS Insights is analysis software that fuses location analytics with open data science and business intelligence workflows. You can use it to create informative pages that combine graphs, charts, and (of course) maps.

You can also add other types of items to a collection, as long as they are saved as ArcGIS Online items. These include configurable apps, dashboards, images, and PDFs.

 

Link to a specific item in a collection

Collections are useful for bundling together related stories and other ArcGIS apps. You can share links with your audience that send them to the collection overview (where they’ll see a gallery of cards for each item available to them) or to the presentation view (where they’ll see items one-by-one as full-page interactives). The general presentation view link will always open to the first item in the collection. If, however, you’d like to point readers to a specific item, you can also generate a link that will open the presentation view on that app or story.

There are two ways you can generate this link. The first is by navigating to the collection overview, clicking on the card of the item to which you want to direct your readers, and simply copying the URL from your browser once the presentation view loads.

You’ll notice that this link includes /present, indicating that you’re pointing to the presentation view of a collection. It also includes ?item=n, where n is the number of the item in that collection. So, if you want a bit of a shortcut for linking to a specific collection item—let’s say the fourth item, for example—simply grab the collection link and add /present?item=4 to the end of the URL (or whatever number applies to your desired item).

If you’re not sure of the item’s number in the collection, simply open the presentation view, navigate to your item of choice, and you’ll see the specific item number in the header alongside the total number of items in the collection.

 

 

Hide the cover for an story in a collection

For anyone using a collection for something like a presentation, where the content can speak for itself and/or be introduced by a presenter, it can be useful to hide the cover of a story or multiple stories within that collection. When editing a collection, just click on the gear button that appears when hovering over an item in the collection to access the Custom item details panel. In that panel is a checkbox to Hide story cover. Note that this only applies to the story as it appears in that particular collection, and does not affect the actual story itself.

 

Keep readers clicking through a collection with a customized button

One great use for collections is to present a series of sequential stories. The navigation header helps readers keep track of where they are within the collection, but if you really want to encourage them to make the jump from the end of one story to the beginning of the next one, add a Button from the block palette to the bottom of each story. Label it “Read the next installment” or something similar and set the URL to be the link to to the collection itself, then at the end of the URL add the parameter “?item=x” where x is the position in the collection of the next story.

 

Preview a collection

As part of our June release, you can now preview collections the same way you preview stories. While you’re in the collection builder, simply click Preview in the header. From there you can navigate through the collection overview and any content you’ve added to see how everything looks on different devices and with the different styles of navigation options (compact, tabbed, bulleted). You can also get there from the design panel when selecting the navigation option.

 

Print your stories or save them as a PDF

For those of you needing a hard copy of your story, or an offline archival version, the new print capability (currently in beta) can help meet those needs. You can print a story while in the builder, or while viewing the published version. In either case, open the More actions menu in the header and select Print (beta). Your browser tab will refresh with a configuration of your story that’s optimized for printing. You can scroll down through it to adjust the extent for any express maps, web maps, or 3D scenes as needed. When you’re ready, use your browser’s built-in print options to print or save as a PDF on your computer.

 

Duplicate a story or collection

Whether you’re experimenting with alternative ways to organize your content, need to adapt an existing story for a highly specific audience, or want to use a story as a template for a recurring series, duplicating a story (rather than rebuilding it from scratch) can be a huge time saver. To copy your entire story—or collection—enter the builder and open the More actions menu in the header, then click Duplicate story (or Duplicate collection). In just a few moments, your content will be copied over (including any unpublished changes), and you’ll find yourself in the builder for the newly duplicated piece. Even if the story you duplicated was published, the copy will exist as a draft until you decide to publish it.

 

 

 

About the authors

Upstate NY transplant. Content creator for Esri's StoryMaps team. Fascinated by how storytelling affects the human brain. Lover of conservation. Overly proud dog mom.

Connect:

Will is a Content Specialist on the StoryMaps editorial team. A yinzer born and bred, he is an aficionado of two-lane road trips, Minor League Baseball, malt-forward beer, or any combination thereof.

5
Leave a Reply

Please Login to comment
newest oldest
Mujuni Desdery
Mujuni Desdery

Hi.I am looking other alternative for arcGIS story map to turn on TV Screen player either MP3 or MP4 while is offline

More elaboration my client having TV Screen for Tourist viewing .”Its possible ArcGIS story map to play offline& automatic navigation on TV screen’

Bellow link its arcgis story map on TV screen viewing

https://storymaps.arcgis.com/stories/f00dbcf4ed374691b920e5e166eb0f91

Capital Area Food Bank
Capital Area Food Bank

Thanks for these tips — keep ’em coming!

Scott Norton
Scott Norton

Great tips, thanks for the Article! I ran into a bug the other day when duplicating a story map. The Express map would not display after publishing the duplicated story map and even a new Express map, made from scratch in the duplicated story map would not display when published. Have you experienced this?

Joel Mathwig
Joel Mathwig

Cool stuff for sure.

However, I’m still looking for some basic text editing tools, such as changing font size or typical list (bullets, numbering) functions (secondary, tertiary, etc. indents).

Thanks.

Next Article

Announcing the first beta release of the ArcGIS Maps SDK for game engines

Read this article