Add maps with scale bars to Story Maps

Note: This blog article covers the classic Esri Story Maps which are in mature support and scheduled to be retired in late 2025. Story authors are strongly encouraged to use the new ArcGIS StoryMaps to create stories.

For more information about transitioning to the new StoryMaps, see ArcGIS StoryMaps resources. For more information about the transition from classic Esri Story Maps to the new ArcGIS StoryMaps, see Esri Story Maps: Now in mature support.

When you add web maps to your story map, the scale bar is omitted. Why? The scale bar may be unneeded for your story, and the map and its context may provide all you need. Another reason is that at small scales the scale bar is ambiguous; the scale will differ within the visible extent of the map. At large scales (zoomed in) the scale is accurate across the visible map.

When you want a map with a scale bar, there are a couple of options you can use. This tutorial uses the Story Map Journal, but the techniques described here can be applied in other story maps.

Using the Map Journal builder, maps are typically added to the main stage by choosing Map in the Content section, then selecting the desired one.

This will add the map, but without a scale bar. If you do want to include a scale bar, here are two options to consider.

Option 1: Use embed code

Map embed code is typically used to embed a map in a website, but it can also be used to add a map to your story map with configured options, including a scale bar. Follow these steps.

Step 1. Share the map publicly to enable and click Embed In Website.

Step 2. Uncheck Allow responsive sizing. When embedding a map in your story map, this is not needed. And, it will use an extra iframe tag which the Story Map builder will complain about.

Step 3. Select the map options you want to include with your embedded map. You’ll likely want to keep options minimal, but will want to add a scale bar.

Step 4. When finished, click Copy to capture the HTML to the clipboard.

Step 5. In the Map Journal builder, add a new section. In the main stage content, choose Web page, instead of Map.

Step 6. Paste the HTML copied in Step 4 into the Embed code input.

Step 7. Click Configure.

Step 8. Accept the default Position of Fill.

Step 9. Complete building your story map, and save. The main stage with the embedded map will include a scale bar.

Option 2: Use an app – Minimalist

Another option is to publish your map using an app configured to include a scale bar, then add the app to the main stage of your Map Journal. You can use any app, but a great choice for this purpose is Minimalist. Minimalist is designed to showcase a map using a very simple user interface. The default configuration includes only zoom tools plus a scale bar.

You can fully configure the app and save it, then add it to the main stage using its URL. But one of the conveniences of using Minimalist is that you can add it using Preview, since the default configuration includes all you need. See Quickly share your map using an app for more details.

Follow these steps to use Minimalist to add a map with a scale bar to your story map.

Step 1. Save and Share your map.

Step 2. Click Create A Web App.

Step 3. Locate and select Minimalist from the gallery.

Step 4. Click Preview, and the map will open in the default Minimalist configuration in a new browser or tab. Copy the preview URL from your browser.

Step 5. In the Map Journal builder, add a new section. In the main stage content, choose Web page, instead of Map.

Step 6. Paste the URL copied in Step 4 into the Web page link.

Step 7. Click Configure.

Then complete building the story map. Rather than using Preview you can also complete configuring the Minimalist app, then save it. Once saved, open the app and use the URL as described in Step 5.

Summary and More Info

Using embed or a configurable app is an easy way to add a scale bar to a map when desired in your story map. Different configurable apps offer different capabilities, and you can add more than just a scale bar when needed. For additional information see:

• Story Maps website
• Story Map Journal overview
• Create apps from maps