ArcGIS StoryMaps

Showing time in ArcGIS StoryMaps

Time is a theme that appears in many stories. By visualizing how a place or phenomenon evolves over time, we can gain a deeper understanding of its history and significance. There are many ways to visualize time in ArcGIS StoryMaps, and authors have used time-based visualizations to provide insights into topics as diverse as bird migrations, urban growth, and mental health. This post covers some of the most effective and creative techniques for weaving time-based maps and data into your stories.

To show time in a story, you first need to find or create layers that contain temporal data, and then add those layers to a map. Temporal data can be structured and stored in several different ways. How the data is published and presented may dictate—or at least influence—how you show it in your story. This post focuses on the two most common temporal data schemes:

Note: For the purposes of brevity, this post focuses on web map workflows, but many of the methods described in this post can also be achieved using static maps (created in ArcGIS Pro or elsewhere).

If you’re interested in something specific, you can use these links to jump right to any section…

 

Time as a layer

A single layer often shows a snapshot of data at a particular moment in time. For example, Esri’s Living Atlas of the World contains U.S. county health data for 2020, 2021, and 2022 (as well as other years). These layers do not have any time-stamped attributes that vary with time, but each layer as a whole represents a measurement (or measurements) at a particular point in time. Specifically, each layer contains a selection of health indicators, reported at the county level, for a single year. Together, these layers could be used to show how a community’s health has changed over time, or to compare between two or more years.

A static map of the continental U.S., with counties color-coded to reflect their populations' rates of mental distress rates in 2022
A choropleth map of mental health rates for the year 2022

Similarly, imagery layers capture snapshots of a location at an instant in time. For example, imagery from different time periods can be used to show the extent of damage caused by a flood, or the removal of vegetation surrounding an urban area across several decades.

A side-by-side satellite imagery comparison of the Jordanian desert in 2014 (left) and 2022 (right). In 2014, the land is largely barren, but in 2022, a massive refugee camp dominates this area.
A side-by-side comparison of the Jordanian desert in 2014 (left) and 2022 (right), showing significant land use changes

In each of the cases above, the layers represent  data at a specific point (or range) in time. But a single layer can also reflect time by showing the change in an attribute over time, like in this layer showing land cover change between 2018 and 2021, or this layer showing projected population growth between 2022 and 2027.

A choropleth map centered on San Antonio, showing expected population change by census tract from 2022-2027. Lighter tracts indicate slower rates of growth (or even population loss); darker tracts show greater rates of growth.
This choropleth map shows expected population change in San Antonio from 2022-2027

Additionally, a single layer may represent the results of a spatiotemporal analysis. Advanced GIS users might use ArcGIS Pro to generate a space time cube, or to locate space time clusters or emerging hot spots. The results of these analyses can then be added to a map (or maps) and displayed in ArcGIS StoryMaps. For more information on spatial and temporal pattern analysis, check out this blog post.

Now that we’ve defined the concept of “time as a layer” and have reviewed some examples, let’s dive into the various methods and tools you can use to visualize time-based layers in ArcGIS StoryMaps.

 

Map choreography

Map choreography is a powerful storytelling technique in which several related map views are presented one after another in quick succession. Typically, each map view highlights a specific location or subset of map layers, and can be accompanied by some explanatory text. As the reader scrolls or clicks through the story, the map smoothly transitions from one author-configured view to the next, resulting in an elegant, frame-by-frame map animation that readers can follow at their desired speed.

Map choreography is achieved using the sidecar block in ArcGIS StoryMaps. A sidecar is made up of individual slides, each of which contains a fixed media panel (which can feature an author-defined map view) and a scrolling narrative panel. Map choreography is commonly used to deconstruct complex maps, or to focus on areas of interest in a spatial dataset. But it’s also well-suited for visualizing change through time—especially when each map layer represents a specific moment (or range) in time.

Depending on your data and the story you’re trying to tell with it, you may wish to show a single snapshot of data (such as a year, decade, century, etc.) in each slide, like in this example, which compares mental health rates in 2015 and 2019. Or, you can “stack” multiple layers to highlight cumulative changes through time—for example, to narrate eras eras of bridge construction or to visualize the projected consequences of coastal flooding.

An animated screen recording of a reader navigating through a sequence of sidecar slides, with each slide containing a map of the U.S. that locates all bridges built during a particular era
This sidecar block uses successive slides to show the proliferation of bridges in the U.S. over time

Pro tip! For performance reasons, it’s often best to add all layers to the same map, and use the capabilities of the sidecar builder to toggle layer visibility as needed for each slide in the sidecar block. But if you’re planning to choreograph lots of layers in a single sidecar block, you may achieve better results by creating individual maps for each sidecar slide. For more information on web map performance, check out this page.

 

Map actions

A map action is a special link or button that can accompany a web map in a sidecar block. When clicked, an action changes the appearance of the map to show a specific, author-configured view—such as a discrete snapshot in time. By clicking through a set of map actions, readers can easily compare a phenomenon at different points in time, highlighting for example the rise of megacities, or the ebbs and flows of naval combat in WWII.

Keep in mind that readers don’t need to interact with map actions in order to advance the narrative. This means it’s generally inadvisable to conceal essential map views behind map actions, as some readers may never see these views. But if your goal is to enrich your sidecar with supplemental time-specific map views, then map actions are a great choice.

An animated screen recording of a reader clicking through several map actions in a sidecar slide, which features a global map of ships that sank in WWII. Each map action filters the map data to a specific year, from 1939 to 1945.
Map actions allow readers to filter this map of WWII shipwrecks by year

Note that only one map action can be active at a time; if it’s essential (for narrative purposes) that readers can independently toggle the visibility of multiple layers, you might instead consider creating and embedding an Interactive Legend app.

 

Swipe

The swipe block allows readers to compare two maps (live or static), or two photos, side-by-side using an interactive slider. It can be used to create compelling comparisons of imagery or thematic data at two distinct periods in time. For example, swipe can be used to compare the extent of river flooding now and in the future, or to compare historic land cover patterns to contemporary ones.

An animated screen recording of a reader using a swipe block to compare a map of a river's water level today (left) with a map of that river's water level in 2130 (right). In the latter map, the water has visibly exceeded the current riverbed.
This swipe block compares present-day water levels to expected levels in 2130

 

Time as an attribute

If a layer has a time attribute (that is, an attribute in a date/time format like “date created” or “time of day”) that means its other attributes vary across time. In this case, simply rendering the layer as-is will show all available data across time, which may not reveal the interesting patterns you want to communicate in your story. For instance, a single layer might include a city’s population at three distinct points in history, but it’s unlikely that you’d want to show all three measurements simultaneously.

For storytelling purposes, you’ll instead probably want to refine your data to show specific times or ranges. To do this you can filter or style the layer by time—or even publish it as a time-enabled layer that will exhibit special behavior in ArcGIS Online.

A screenshot of a layer's attribute table, taken in the Map Viewer. The table contains contains multiple date fields, and the "Event Time" field is currently selected.
An attribute table containing multiple date fields

 

Filtering by time

Any layer with a time attribute can easily be turned into a snapshot layer using filters, and then presented in a story using the methods in the previous section. If you need more than one snapshot or range, simply create copies of the layer and apply different date filters to each copy. Choosing a date/time attribute in the filter will present date-specific operators like “is on,” “is before,” and “is between” that will let you specify a snapshot or a time range. For more information on how to filter by date see the help document on how to Apply filters.

Pro Tip! Usually publishing a single time-enabled layer gives you the most flexibility since you can create copies of it and use filters to show different snapshots or ranges. However, querying very large temporal datasets can be slow, so consider publishing individual snapshot layers if performance becomes an issue.

 

Smart Mapping with time

There are several ways to style layers to show time using Smart Mapping. You can use the time-based smart mapping renderers like Continuous Timeline and Age to present data that has a time attribute to answer questions like:

A choropleth map centered on the northeastern quadrant of the U.S., with counties colored to reflect the predominant era of local housing construction. Dark blue tracts indicate older housing stock, while bright pink tracts indicate newer housing stock.
This map uses Smart Mapping to reveal the predominant age of housing construction

Using Smart Mapping, you can even combine a time attribute with a second numeric, category, or time attribute using the Color & Size or Types & Size renderers. These renderers let you show time and another variable simultaneously. A layer must have a field formatted with a date/time format to be used with these renderers.

Check out these resources for more information about showing time using Smart Mapping:

Pro Tip! If the ability to interact with a map is not critical to your story (and if your data isn’t changing) you can prepare your map (either in Pro or Online), take a screenshot or export it as a static image, and add the image to your story. Images will always perform better than live maps and are often the best way to include maps in your story. Use a mix of static map images and dynamic web maps depending on the purpose of each map in your story.

 

Time animation widget

Adding a time-enabled layer to a web map automatically enables a time slider in the Map Viewer, which can be used to interactively browse and animate the layer’s data through time. In the web map options, you can configure certain properties of the time slider, like its playback interval, playback speed, and whether it should display all features cumulatively or one interval at a time.

If you add a time-enabled web map to your story, you can optionally enable a time animation widget in the map editor. This widget inherits all of the time slider properties from the underlying web map and provides a set of simple playback controls for controlling the time animation. The widget is a low-complexity solution for basic time animations.

An animated screen recording of a U.S. crop map in a story. The time animation widget is active, and the map animates to show changes through time.
An example of the time animation widget in action

One notable advantage of the time animation widget is that it doesn’t need to be manually configured or updated when the underlying data changes, so it’s especially useful for visualizing dynamic data that may be edited after the web map and story are published.

Pro tip! The smaller and simpler your time-enabled dataset, the better it will work with the time animation widget, since each frame of the animation must be rendered in real-time. For more complex or data-rich time-based animations, you may wish to render your animation as a video instead.

 

Embed a time-aware app

If the web map time slider’s exploratory capabilities are essential for your narrative, you can create a configurable app that features the fully interactive time slider—such as the Slider template or the Media Map template—and then embed that app directly into your story.

An animated screen recording of a story containing an embedded time-aware app. The app is centered on the U.S. and animates to show the secession of U.S. states prior to the Civil War.
This embedded time-aware app allows readers to navigate forward and backward through time.

Keep in mind that some readers may not interact with the full slider. And, as with all embeds, be sure to consider the mobile display options and to preview your story on a mobile device before publishing. You may wish to display the live embed on mobile, or to instead replace it with a pre-rendered, GIF-based version of the animation.

 

Time animation as a video

If you wish to exercise greater directorial control over your time-based animations than the widget allows, you can create a custom animation in ArcGIS Pro, export it as a video, and then upload the video to your story. While complex animations can be difficult and time-consuming to produce, this approach enables you to take full advantage of Pro’s vast cartography toolset. Plus, pre-rendered animations will usually load faster in a story than a dynamic web map.

An animated map of the world that shows major human settlements from 3,000 BC to present
This simple time-based animation reveals the gradual spread of human settlements

Time animation videos have been used in ArcGIS StoryMaps to highlight historic sea ice loss, the astounding journeys of migratory birds, and Japanese-American Internment camps. In all of these examples, the animations include dynamic text that identifies the currently visible date(s).

 

Showing time in non-geographic ways

This is a good time to mention that not all time-enabled data needs to be visualized on a map (gasp!). It’s true. There are many other visualization techniques that don’t involve a map. A few are highlighted below.

 

Timelines

You can use a timeline to represent a simple series of events. The timeline block in ArcGIS StoryMaps provides a fun and intuitive way to add chronological visualizations to your story in a more flexible and dynamic presentation than static images or purely text-based lists can offer. You can drop a timeline almost anywhere in the story, even in a sidecar narrative panel.

A timeline shown in a story
Timelines can show a series of events with or without images

There are other tools on the web that you can also use to create timelines, and those can be embedded in a story using the Embed option. Below is an example of a custom horizontal timeline.

 

Charts

If there isn’t a compelling geographic dimension to the data, then a static or interactive chart may communicate your messages more effectively than a map.

Static charts can be created apps like ArcGIS Pro (learn more about making charts in ArcGIS Pro) or Excel and then added to a story as screenshots. Alternatively, interactive charts can be created with web-based tools like ArcGIS Dashboards or ArcGIS Insights, and then embedded into a story.

A static line chart showing the gradual increase in internet searches for "mental health" in the U.S. from 2012-2022
Line charts can be used to visualize non-spatial temporal data, like this one, which shows the gradual increase in internet searches for "mental health"

 

It’s your story…

As the examples above collectively illustrate, there are myriad reasons for visualizing time—and myriad methods for implementing time-based visualizations in ArcGIS StoryMaps. As you evaluate the options covered in this post, be sure to consider not only the structure of your time-aware data, but also the role it plays in your story, and the key messages you’re trying to communicate.

Is change over time a central pillar of your narrative? If so, you may want to use map choreography, due to its prominence, flexibility, and reader-controlled navigation. Is time more of a secondary element in your story? In that case, you might instead use map actions or a pre-rendered video, as these options are less narratively intrusive. At the end of the day though, there’s no “right” or “wrong” approach. After all, it’s your story to tell.

About the authors

Owen is the lead product engineer for ArcGIS StoryMaps and has been with Esri since 2004. Before joining the StoryMaps team, he spent 11 years as a solution engineer on Esri's National Government team helping people understand the value and utility of geospatial thinking.

Connect:

Cooper is a cartographer on Esri’s StoryMaps team. His maps have found their way onto the @Esrigram Instagram feed, the front page of Reddit, and his parents’ fridge. In his spare time, Cooper enjoys playing Mozart to his houseplants so that they someday grow tall and strong.

Connect:
0 Comments
Inline Feedbacks
View all comments

Next Article

Pop-ups: the essentials

Read this article