Time widget

Version 3.7

This Time widget is designed to work with time enabled data that is published from ArcGIS for Server as either a feature or dynamic service, which requires ArcGIS 10. It provides a time slider control in the ArcGIS Viewer for Flex user interface (U)I, which allows an end user to "play through" and view temporal data.

Screen shot of the Time widget.

At a conceptual level, the Time widget defines time-related properties and applies them to the map in the ArcGIS Viewer for Flex. It can be used to show animations in the web application, which can be used to analyze data through time or to view information in different layers. Examples include showing the progression of a hurricane as it travels or earthquake occurances over a period of time. The following screen captures depicts the latter example: from left to right - earthquakes in June 1975 to earthquakes in September 1981 to earthquakes in October 2001.

Time progression

Application Builder provides easy integration of time-enabled data into your ArcGIS Viewer for Flex web application through its Time widget. In the screen capture below, the Time widget is added as a widget to the application under the Widgets tab. The Time widget's edit settings show a dynamic map service hosting the time-enabled earthquakes layer used in the screenshot above.

Time-enabled service in Application Builder

A small example of the REST directory contents shows the Time Info property of this service.

REST directory showing Time Info for the layer referenced in Application Builder

Time widget in Application Builder

Time widget edit settings in Application Builder


If working in the source or compiled version of ArcGIS Viewer for Flex, note that all layers referenced in the application configuration file that have temporal data, will then follow the time properties defined by the Time widget, enabling them to be displayed in the web application.

The following is sample code for the Time widget's configuration file:

     <dateformat>MMMM, YYYY</dateformat> <!-- month, year -->
     <loop>false</loop> <!-- play animation once, do not loop -->
     <thumbmovingrate>1000</thumbmovingrate> <!-- 1000 milliseconds between time stops -->
        <starttime>1970/01/01 19:00:00 UTC</starttime>
        <endtime>2010/06/01 19:00:00 UTC</endtime>

Read the desktop help on serving time-aware layers for more information about preparing and serving time aware layers that can work with the Time widget.

Conceptual workflow

Requires data layers that contain time information:

Test drive the Time widget or see its tag reference.