Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: TimeSlider
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/TimeSlider"], function(TimeSlider) { /* code goes here */ });
Description
(Added at v2.0)
The TimeSlider widget is used for visualizing content within a map that contains time-aware layers.
See also
Samples
Search for samples that use this class.Constructors
| Name | Summary |
|---|---|
| new TimeSlider(params, srcNodeRef) | Creates a new TimeSlider object. |
CSS
esri/dijit/TimeSlider | Download source
Properties
| Name | Type | Summary |
|---|---|---|
| loop | Boolean | Default value is false. |
| playing | Boolean | Default value is false. |
| thumbCount | Number | Default value is 1. |
| thumbMovingRate | Number | Rate at which the time animation plays. |
| timeStops | Date[] | An array of dates representing the stops (tics) on the TimeSlider. |
Methods
| Name | Return type | Summary |
|---|---|---|
| createTimeStopsByCount(timeExtent, count?) | None | The specified number of time stops are created for the input time extent. |
| createTimeStopsByTimeInterval(timeExtent, timeInterval?, timeIntervalUnits?) | None | Create a time stop for each interval specified, i.e., (week, month, day). |
| getCurrentTimeExtent() | TimeExtent | Gets the current time extent for the time slider. |
| next() | None | Move to the next time step. |
| pause() | None | Pause the time slider. |
| play() | None | Play the time slider. |
| previous() | None | Move to the previous time step. |
| setLabels(labels) | None | Specify an array of strings to be used as labels. |
| setLoop(loop) | None | Determines whether or not loop. |
| setThumbCount(thumbCount) | None | The number of thumbs to display. |
| setThumbIndexes(indexes) | None | Array of two integers, the first value determines where to put the first thumb. |
| setThumbMovingRate(thumbMovingRate) | None | Change the rate at which the time animation plays. |
| setTickCount(count) | None | Specify the number of ticks to display on the time slider. |
| setTimeStops(timeStops) | None | Manually define the time stop locations by providing an array of dates. |
| singleThumbAsTimeInstant(createTimeInstants) | None | Determine if the time is displayed for an instant in time. |
| startup() | None | Finalizes the creation of the widget. |
Events
[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
Events
| Name | Event Object | Summary |
|---|---|---|
| next | {
timeExtent: < | Fires when the next button is clicked or TimeSlider.next() method is invoked. |
| pause | {
timeExtent: < | Fires when the pause button is clicked or TImeSlider.pause() method is invoked. |
| play | {
timeExtent: < | Fires once when the play button is clicked or Timeslider.play() method is invoked. |
| previous | {
timeExtent: < | Fires when the previous button is clicked or TimeSlider.previous() is invoked. |
| time-extent-change | {
timeExtent: < | Fires when the timeExtent of the TimeSlider is changed. |
Constructor Details
Creates a new TimeSlider object.
Parameters:
< |
Required | Parameters for the time slider object. See the options table below for parameters. |
< |
Required | HTML element where the time slider should be rendered. |
params properties: < |
Optional | When true, subtracts one second to the time extent's end time to exclude data at the exact end time instant. |
< |
Optional | When true, adds one second to the time extent's start time to exclude data at the exact start time instant. |
Property Details
<Number
NumberDefault value is 1.
<Number
NumberRate at which the time animation plays. Default value is 1000 milliseconds.
<Date[]
Date[]An array of dates representing the stops (tics) on the TimeSlider.
Method Details
The specified number of time stops are created for the input time extent.
Parameters:
< |
Required | The time extent used to define the time slider's start and end time stops. |
< |
Optional | The number of time stops to create. |
Create a time stop for each interval specified, i.e., (week, month, day).
Parameters:
< |
Required | The time extent used to define the time slider's start and end time stops. |
< |
Optional | The length of the time interval. |
< |
Optional | Valid values are listed in the TimeInfo constants table. |
Sample:
require([
"esri/map", "dojo/_base/connect", "esri/dijit/TimeSlider", "dojo/dom", ...
], function(Map, connect, TimeSlider, dom, ... ) {
var map = new Map( ... );
connect.connect(map,"onLayersAddResult",function(results){
var timeSlider = new TimeSlider({},dom.byId("timeSliderDiv"));
map.setTimeSlider(timeSlider);
timeSlider.setThumbCount(1);
timeSlider.createTimeStopsByTimeInterval(results[1].layer.timeInfo.timeExtent,1,'esriTimeUnitsWeeks');
timeSlider.startup();
})
...
});
Gets the current time extent for the time slider.
Return type:
TimeExtentSample:
var startTime = timeSlider.getCurrentTimeExtent().startTime;
Specify an array of strings to be used as labels. The array position for each string defines which tick it will be placed on.
Parameters:
< |
Required | An array of strings that define the labels for each tick. |
Sample:
Add a label for every other tick.
require([
"esri/dijit/TimeSlider", "dojo/_base/array", ...
], function(TimeSlider, array, ... ) {
var timeSlider = new TimeSlider( ... );
var labels = array.map(timeSlider.timeStops, function(timeStop,i){
if(i%2 === 0){
return timeStop.getUTCFullYear(); }
else{
return "";
}
});
timeSlider.setLabels(labels);
...
});
Determines whether or not loop. Default value is false.
Parameters:
< |
Required | True plays the time slider continuously. Default value is false. |
Sample:
timeSlider.setLoop(true);
The number of thumbs to display. A value of one displays a single thumb. Setting the value to 2 displays a range slider.
Parameters:
< |
Required | The number of thumbs to display. Default value is one. |
Sample:
timeSlider.setThumbCount(2);
Array of two integers, the first value determines where to put the first thumb. If it is a two thumb slider the second value determines where to place the additional thumb.
Parameters:
< |
Required | Array of two integers. |
Sample:
timeSlider.setThumbCount(2); timeSlider.setThumbIndexes([0,1]);
Change the rate at which the time animation plays.
Parameters:
< |
Required | The rate at which the time slider plays. Default value is 1500. |
Sample:
timeSlider.setThumbMovingRate(2000);
Specify the number of ticks to display on the time slider. (Added at v2.1)
Parameters:
< |
Required | The number of ticks to display on the slider. |
Sample:
require([
"dojo/date", ...
], function(date, ... ) {
timeSlider.setTickCount(date.difference(timeExtent.startTime,timeExtent.endTime,"day"));
...
});
Manually define the time stop locations by providing an array of dates.
Parameters:
< |
Required | Array of dates |
Sample:
require([
"esri/dijit/TimeSlider", ...
], function(TimeSlider, ... ) {
var timeSlider = new TimeSlider( ... );
var myTimeStepIntervals = [new Date("01/01/1970"), new Date("01/01/1971"), new Date("01/01/1972"),
new Date("01/01/1973"), new Date("01/01/1974"),new Date("01/01/1975"), new Date("01/01/1976")];
timeSlider.setTimeStops(myTimeStepIntervals);
...
});
Determine if the time is displayed for an instant in time. Only valid when the thumb count is set to one.
Parameters:
< |
Required | When true, the time slider displays features for the current point in time. When false cumulative data is displayed from the start time to the current thumb location. The default value is false. |
Sample:
timeSlider.singleThumbAsTimeInstant(true);
Event Details
[ On Style Events | Connect Style Event ]
Fires when the next button is clicked or TimeSlider.next() method is invoked. (Added at v3.15)
Event Object Properties:
< |
The current time slice of the time slider. |
Fires when the pause button is clicked or TImeSlider.pause() method is invoked. (Added at v3.15)
Event Object Properties:
< |
The current time slice of the time slider. |
Fires once when the play button is clicked or Timeslider.play() method is invoked. (Added at v3.15)
Event Object Properties:
< |
The current time slice of the time slider. |
Fires when the previous button is clicked or TimeSlider.previous() is invoked. (Added at v3.15)
Event Object Properties:
< |
The current time slice of the time slider. |
Fires when the timeExtent of the TimeSlider is changed. (Added at v3.6)
Event Object Properties:
< |
The current time slice of the time slider. |
Sample:
require([
"dojo/dom", ...
], function( dom, ... ) {
timeSlider.on("time-extent-change",extentChanged);
function extentChanged(evt){
//format the dates for display
var timeExtent = evt.timeExtent;
var startVal = timeExtent.startTime.getFullYear();
var endVal = timeExtent.endTime.getFullYear();
dom.byId("timeVal").innerHTML = "<b> Current Time Extent:" + startVal + " TO " + endVal + "<\/b>";
}
...
});