The Timeline widget allows you to view temporal data from feature layers, imagery layers, tiled imagery layers, map service layers, and web maps to see how data changes over time. Using this widget, you can animate data with play and pause buttons and manually view changes using a slider, and zoom in and out on a timeline.
Examples
Use this widget to support app design requirements such as the following:
- You want to present specific data over time to support a narrative.
- You want to analyze and visualize temporal data patterns.
- You want to compare feature attributes geographically and over multiple years.
Usage notes
This widget requires a data source that includes temporal and time-enabled data. The data source can be a web map, one or multiple map services, one or multiple imagery or tiled imagery layers, or one or multiple feature layers. The Timeline widget updates the data source universally, meaning it affects other widgets using the same data. For example, you can connect a Timeline, Map, List, and Table widget to the same feature layer and use the Timeline widget to filter the others.
The data source may include a time offset. An offset allows you to display time-enabled data using time values that are offset from the time values recorded in the data. Applying a time offset does not affect the date and time information stored in the source data. For example, you can use an offset of one year to make data for a hurricane display as if it occurred at the same time as a different hurricane from the previous year. If a data source includes an offset, the Timeline widget honors the offset.
Feature layers that are sublayers within a map service cannot be used as the data source.
When you include this widget in an app, the widget provides users with the following options:
-
Overall time extent—Click the information button to display the entire extent of time represented by the timeline and view the following setting:
-
Timeline filtering applied—When this option is turned on, the Timeline widget filters the connected data source at the framework level, meaning it affects any other widgets using the same data source.
-
-
Zoom in and Zoom out—Zoom in or zoom out on the slider.
-
Previous and Next—Move the slider one step forward or backward.
-
Play and Pause—Play or pause the time animation.
-
Speed—Choose a play speed from five levels: Slowest, Slow, Medium, Fast, or Fastest.
Settings
The Timeline widget includes the following settings:
-
Source—Select a data source with temporal data to analyze with the widget.
-
Time settings—Configure the timeline's settings. Time settings include start time, end time, length of time steps, and more.
-
Synchronize with the time settings in the web map (Only available for web maps)—Synchronize the widget's time settings with settings configured in Map Viewer.
-
Customize time settings—Modify the timeline's start time, end time, length of time steps, and more. Click the Configure time button to open the Configure time panel.
-
Enable time animation for—Specify the layer for which to make the time animation.
-
Time span—Set the length of time represented by the timeline. The layer bar or bars show the total amount of time represented in the connected layers. You can drag both ends of the Overall time extent bar to set the timeline's time span relative to the layer bar or bars.
-
Start time and End time—Set the lower and upper limits for the widget. You can define the start and end times in the following four ways:
- Minimum of all and Maximum or all—Use the minimum and maximum points from the selected data for the start and end time.
- Today—Anchor the start or end time to the current date. Optionally, add an offset number of years, months, or days. For example, if you choose Today for the start time and provide an offset of 6 days, the start time will always be 6 days after the current date. If you provide an offset of -6 days, the start time will always be 6 days before the current date.
- Now—Anchor the start or end time to the current minute. This option is the same as Today, except the offset adds hours and minutes as available units.
- Custom—Choose a specific date and time from a calendar interface.
-
Set the minimum time accuracy—Provide the minimum interval between notches on the timeline. Each unit is only provided in the drop-down menu when the Time span value is long enough to contain at least one of them.
-
Time step—Select one of two modes for dividing the timeline into steps:
-
Length of one step—Use natural time units, such as months or days, to define the steps. You can only choose units that are the same or greater than the unit you provide for the minimum time accuracy. If you choose this mode, the user can use the Previous and Next buttons to move the slider one step at a time based on the minimum time accuracy you provide.
-
Total time divided into equal steps—Divide the time extent into an equal number of steps. If you choose this mode, the user can move the slider 1/n of the total length at a time using the Previous and Next buttons. For example, if you choose this mode and provide 5 as the number of equal steps, the user can move the slider one-fifth of the total length at a time.
-
-
Time display—Choose a method for visualizing data:
- Show current window—Only show data associated with each step. For example, you can show a hurricane's position every day for one month.
- Show data cumulatively—Add data to the display cumulatively. Data from previous steps stays when the widget moves to the next step. For example, you can show a hurricane's path over one month by adding its daily positions together chronologically.
-
Default play speed—Choose a default play speed from five levels: Slowest, Slow, Medium, Fast, or Fastest.
-
-
-
Style—Choose a layout style for the widget, either Classic or Modern.
-
Appearance—Customize the widget's foreground, background, and slider colors.
-
Display options—Choose to include play control and autoplay.
- Enable play control—Include the Play, Pause, and Speed buttons.
- Autoplay—Play the time animation automatically when the widget loads.