Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/en/javascript/jsapi/timeslider-amd.html below:

TimeSlider | API Reference | ArcGIS API for JavaScript 3.46

require(["esri/dijit/TimeSlider"], function(TimeSlider) { /* code goes here */ });

(Added at v2.0)

The TimeSlider widget is used for visualizing content within a map that contains time-aware layers.

See also

Search for

that use this class.

esri/dijit/TimeSlider | Download source

[ 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.

{
  timeExtent: <TimeExtent>
}

{
  timeExtent: <TimeExtent>
}

{
  timeExtent: <TimeExtent>
}

{
  timeExtent: <TimeExtent>
}

{
  timeExtent: <TimeExtent>
}

Constructor Details

Creates a new TimeSlider object.

Property Details

Default value is false.

Known values: true | false

Default value is false.

Known values: true | false

Rate at which the time animation plays. Default value is 1000 milliseconds.

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.

Create a time stop for each interval specified, i.e., (week, month, day).

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.

var startTime = timeSlider.getCurrentTimeExtent().startTime;

Move to the next time step.

Move to the previous time step.

Specify an array of strings to be used as labels. The array position for each string defines which tick it will be placed on.

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.

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.

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.

timeSlider.setThumbCount(2);
timeSlider.setThumbIndexes([0,1]);

Change the rate at which the time animation plays.

timeSlider.setThumbMovingRate(2000);

Specify the number of ticks to display on the time slider. (Added at v2.1)

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.

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.

timeSlider.singleThumbAsTimeInstant(true);

Finalizes the creation of the widget. (Added at v3.12)

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)

Fires when the pause button is clicked or TImeSlider.pause() method is invoked. (Added at v3.15)

Fires once when the play button is clicked or Timeslider.play() method is invoked. (Added at v3.15)

Fires when the previous button is clicked or TimeSlider.previous() is invoked. (Added at v3.15)

Fires when the timeExtent of the TimeSlider is changed. (Added at v3.6)

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>";
  }
  ...
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4