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, a subtype group layer, or one or multiple feature layers. The widget supports connecting whole subtype group layers, but not individual subtype sublayers. 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.
Tip:
To enable time settings on a layer, the layer must be published to ArcGIS Online with a date field.
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.
Tip:
You can use this option to combine the Timeline widget and other data consuming widgets, such as Map and List widgets. The widgets must be connected to the same time-enabled data source.
- 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—You can connect the Timeline widget to data in the following ways:
- Add web map or individual layers—Select a data source with temporal data to analyze with the widget.
- Interact with a Map widget—Connect the Timeline widget to a Map widget. The Map widget must contain a map or scene with temporal data. The Timeline widget automatically populates with any time-aware data from the Map widget.
- Time settings—This group of settings appears when you choose Add web map or individual layers. Time settings include start time, end time, length of time steps, and more. You can choose to use the time settings from the connected web map or customize time settings.
- 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.
Note:
Users can click and hold the time slider to drag it freely forward and backward.
- Time display—Choose a method for visualizing data:
- Show current features—Only show data at one particular point in time. The timeline will have a point that moves along the slider.
- Show current window—Only show data associated with each step. For example, you can show a hurricane's positions for every day within a one month span. The timeline will have a line that moves along the slider. The line represents the length of the window.
- 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. The timeline will progressively fill the whole slider.
- 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.
- Options—Configure the following general settings:
- Enable play control—Include the Play, Pause, and Speed buttons.
- Autoplay—Play the time animation automatically when the widget loads.
- Apply timeline filtering by default—Choose to have the Timeline filtering applied option be turned on or off by default when the widget first loads at run time.
- Display accuracy—This setting affects time display accuracy in the widget. If you turn on this setting, you can use the drop-down menu to choose a level of accuracy.