[GIS] How to programmatically change the timeExtent of a Map & update the timeSlider

arcgis-javascript-apijavascripttimeslider

I am developing with the ArcGIS JavaScript web API and ArcGIS server 10.0.

I have a time-aware layer in in my map, and also a timeslider. The full time extent of the map is a year, with data every month.

I want that when the map loads, the data is shown for that particular month, and the slider is also on that month.

I can programatically set the timeExtent on the map, using map.setTimeExtent(), but the timeslider does not auto-update to this date.

How should the timeExtent to be set, so that the timeSlider auto-updates along with it?

To see an reproducible example, go to the sample: http://help.arcgis.com/en/webapi/javascript/arcgis/samples/time_sliderwithdynamiclayer/index.html, and open up your firebug/developer console, and enter

map.setTimeExtent(map.timeSlider.fullTimeExtent);

The map will show you data for the entire period, but the time slider does not update.

Best Answer

You are approaching this backwards--the time slider's time extent updates the map's time extent, not the other way around. It's my understanding that the map.setTimeExtent() function should only be called when a time slider is not in use.

You should be setting the extent of the time slider and setting the position of the time thumb(s), which then updates the current time extent of the map.

If you have already configured your time slider, this is as simple as:

// Assuming time slider has a single time thumb
timeSlider.setThumbIndexes([0]);

This will move the time slider's thumb position to the first time stop, which will then update the map's time extent to match. Any time-enabled layers will be listening for this event and will redraw automatically.

If you have two time thumbs, you have to set the index of each one:

// Moves first time thumb to the first time stop and the second time thumb to the second time stop
timeSlider.setThumbIndexes([0,1]);

Here is a more complete example, assuming you have data valid on the first day of each month:

var timeStops = [new Date(2013, 0, 1), new Date(2013, 1, 1), new Date(2013, 2, 1), new Date(2013, 3, 1), new Date(2013, 4, 1), new Date(2013, 5, 1), new Date(2013, 6, 1), new Date(2013, 7, 1), new Date(2013, 8, 1), new Date(2013, 9, 1), new Date(2013, 10, 1), new Date(2013, 11, 1)]

var timeSlider = new esri.dijit.TimeSlider({style: "width: 100%;"}, dojo.byId("timeSliderDiv"));
map.setTimeSlider(timeSlider);

timeSlider.setTimeStops(timeStops);
// Assuming slider has only one thumb:
timeSlider.setThumbCount(1);
// Set position of time slider's thumb to the first date (January 1, 2013):
timeSlider.setThumbIndexes([0]);
// Set animation speed to 1 second:
timeSlider.setThumbMovingRate(1000);
// Time slider thumb position represents an instantaneous time, rather than cumulative:
timeSlider.singleThumbAsTimeInstant(true);
// Allow animation to loop:
timeSlider.setLoop(true);
// Start it up!
timeSlider.startup();

If you already have a time slider and need to reset its time extent:

timeSlider.setTimeStops(newTimeStops);
// Assuming time slider has only one time thumb:
timeSlider.setThumbIndexes([newThumbIndex]);
// startup() must be called after updating time stops:
timeSlider.startup();
Related Question