Add a swipe block to your story

A quick-start guide for creating and configuring a swipe block in ArcGIS StoryMaps

Urban populations in 1950 (left) and 2020 (right). Source:  United Nations Department of Economic and Social Affairs 

Swipe basics

Visual comparisons are a cornerstone of digital storytelling. The swipe block allows readers to compare two maps or two images side-by-side using an interactive slider.

Configuring a swipe block is relatively straightforward: First, you add the block, then you add a map or an image to one side, and then you add a map or an image to the other side. You can optionally tweak some additional settings, but otherwise you’re good to go.

This tutorial walks through the process of adding and setting up both map- and image-based swipe blocks. Read on, and you and your readers will be swiping to your hearts’ content in no time at all!

Creating a map-based swipe block

Step 1: Insert a swipe block

In the ArcGIS StoryMaps builder, click on the small + icon to open the block palette, and then select the Swipe option (located near the bottom of the table). This will insert a blank swipe block into your story.

Note: You can also add a swipe to the media panel of a sidecar slide. Step 11 of  this sidecar tutorial  covers this in more detail.


Step 2: Add the first map

Your next task is to add an initial map. Select the Add a web map button on either the left or right side of the swipe block.

This will open the map browser, where you can choose a web map to appear on the corresponding side of your swipe block.

You can also compare two express maps. Select Add express map on the empty swipe block to open the express map designer.


Step 3: Adjust map appearance

Selecting a web map from the Add a web map page opens that map in the map designer. Here, you can adjust the visibility of its layers. To toggle a layer on or off, hover on the layer in the Map layers panel, then click the small eye icon.

If you instead chose to add an express map in the previous step, you can create your map here; see  this tutorial  for all the ins and outs of building an express map.

If you select the Options tab in the map designer, you’ll notice that the map configuration options are disabled. Although the swipe block contains two maps, controls and widgets are enabled/disabled at the block level, rather than the map level. We’ll circle back to these options in a bit.

Once you’re satisfied with the appearance of your initial map, click Place map, and it will be added to the swipe block.


Step 4: Add a second map

Congratulations, you’re basically halfway done! Now, it’s time to add a second map.

Click on the Add another web map button in the unoccupied half of the swipe block to open the map browser again. Here, you can select a different web map to compare. Or, if you'd like to use the same map on both sides of the block—for instance, to compare different layers within that map, as shown in this example—simply select that map again.

If you're working with express maps, you can create a new map from scratch, or duplicate the one you just created.

Once you've chosen your second map, use the map designer to once again adjust its appearance.

The swipe block’s initial extent is set by the most recently edited map. So the extent you choose here will be used for both maps when your story loads. Click Place map once you're satisfied with the appearance of this map.


Step 5: Refine the maps' initial extent (optional)

If you’re not satisfied with the current extent of your swipe block, you can change this by clicking the Edit (pencil) button toward the bottom of one of your maps. This will re-open that map in the map designer, where you can change the extent.

When you click Place map again, the swipe block will update to use this extent (on both sides).

If you want to replace either map, simply click the Delete button on the bottom of both maps within the swipe block. This will remove that map from the block. You can then repeat steps 2 and 3 to add and configure a different map.


Step 6: Modify block options (optional)

Although map-based swipe blocks feature two maps—one on each side of the slider—they only include one set of map controls. These controls are configured at the block level, rather than the individual map level.

To adjust these options, hover on the swipe block and then select the little gear icon in the toolbar. This will open the Swipe options modal. Here, you can tweak the behavior of the block by disabling map navigation (panning and zooming) or toggling the legend for one or both maps. Under the Properties tab, you can also add some alternative text to the block to improve its accessibility.

Again, keep in mind that these settings will apply to both maps. Click Save to commit any changes you've made to the block settings, or click Cancel to discard those changes.

You can also choose between three different block sizes for your swipe block. You can change the block size the same way you’d change the size of any other media block: Simply hover anywhere on the block, and then select one of the three size icons from the toolbar.


Step 7: Add a caption (optional)

It's generally a good idea to include a descriptive caption for your swipe block. To add a caption, click on the text field immediately below the swipe block, and begin typing. (Or pasting, or dictating, or however you prefer to add text—we're not here to judge.)

Tip: If your maps contain color-coded thematic layers, you can use the caption to provide a simple legend.


Step 8: Preview your work

Once you're satisfied with the appearance of your swipe block—including the configuration of the maps it contains—it's a good idea to preview it to see it in action.

Click on the Preview button in the story's header to see a full-screen preview. You can also click the different device icons in the lower-right corner to see how the swipe block will appear on smaller screens.

Creating an image-based swipe block

As the steps above demonstrate, it's super easy to configure a map-based swipe. It's even easier to implement a swipe block using images. The basic steps are fundamentally the same, except instead of choosing two maps to compare, you can choose—you guessed it!—two images.

Step 1: Add an initial image

After adding a new swipe block, select the Add an image button on either the left or right side of the swipe block. This will open a modal where you can upload your first image.

Select the Browse your files button to locate your image file on your computer. Or, if you already have the image pulled up in a Finder or File Explorer window, you can simply drag and drop it onto designated area in the modal window as shown here.

Either way, you should see a preview of your image. Click Add to drop the image into to your swipe block.

Once the image appears in your swipe block, you can add attribution and alternative text to it by selecting the Options button at the bottom of the image (not shown here). You can also Delete or Replace the image file using the ... button and selecting the corresponding action.

Step 2: Add a second image

Now, let's repeat the process to add an image to the other side of the swipe block. Select the Add an image button and upload your second image as you did in Step 1. Once the upload is complete, select Add to add it to the block.

Tip: For the best experience, we recommend using two images that are the same size, but this isn't required.

Step 3: Adjust block size (optional)

As with map-based swipes, you can quickly resize your image block by hovering over the block and then choosing one of the three block size options from the toolbar at the top.

Step 4: Change image placement method (optional)

Images can be positioned within the swipe block in two ways: The default method, Fill (crop), resizes images so that they fill they entire block. It works best for horizontal images.

If you don't want your images to be cropped, you can switch to the Fit (do not crop) placement method in the Swipe settings modal. When fit is selected, both images will be centered within the block, and will not be cropped. You can also choose a background color to fill the rest of the block. This option is great for vertical images.

Don't forget to add alternative text and a caption to your swipe block. And remember, it's always a good idea to preview your work before publishing!

That's all there is to it. If you've been following along with this tutorial, you should now have a neatly configured map- or image-based swipe block. To recap the process, we first added a new swipe block, then added and configured the first map or image, then added and configured the second map or image, then adjusted some settings, and finally previewed the finished block.

Have any feedback after making a swipe block of your own?  Share it with us ! And, while you're sharing, feel free to send us your own swipe examples on Twitter at  @ArcGIS StoryMaps . Now, go forth and compare!


Looking for more resources?

We have lots of articles, tutorials, videos, and more available on our website. It's a great repository for anyone looking to take their ArcGIS StoryMaps skills to the next level.


About this tutorial

This resource was created by Cooper Thomas, a product designer on Esri's StoryMaps team, using  ArcGIS StoryMaps .