I want to open a time-aware map at a particular time. This works using map.SetTimeExtent - but I'm finding that the associated timeSlider bar does not update to the correct position.See the sample code below for a demonstration. (It's kind of hard to tell but the map is actually showing 1953 when it opens - see the single well on the "Kearney County" label).As far as I can tell, the problem is that calling map.SetTimeExtent(timeExtent) does not call timeSlider.SetThumbIndexes with the appropriate array position.Do you know of a workaround, short of manually calculating the appropriate TimeSlider thumb index and applying this?Thanks,Steve
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Set map to given time</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0"></script>
<script type="text/javascript">
var djConfig = {parseOnLoad: true};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0"></script>
<script type="text/javascript" language="Javascript">
dojo.require("esri.map");
dojo.require("esri.dijit.TimeSlider");
var map;
var timeSlider;
function init() {
var startExtent = new esri.geometry.Extent({"xmin":-11412840.550309708,"ymin":4431952.284758817,"xmax":-11107092.437169151,"ymax":4615401.152643152,"spatialReference":{"wkid":102100}});
map = new esri.Map("map", {extent:startExtent});
var layers = [];
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
layers.push(basemap);
var opLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSWells/MapServer");
opLayer.setVisibleLayers([0]);
var layerDefinitions = [];
layerDefinitions[0] = "FIELD_KID=1000148164";
opLayer.setLayerDefinitions(layerDefinitions);
layers.push(opLayer);
//add all the layers to the map then initialize the slider.
map.addLayers(layers);
dojo.connect(map,"onLayersAddResult",initSlider);
}
function initSlider(results) {
timeSlider = new esri.dijit.TimeSlider({style: "width: 1000px;"},dojo.byId("timeSliderDiv"));
map.setTimeSlider(timeSlider);
var timeExtent = new esri.TimeExtent();
timeExtent.startTime = new Date("1/1/1921 UTC");
timeExtent.endTime = new Date("12/31/2009 UTC");
timeSlider.setThumbCount(1);
timeSlider.createTimeStopsByTimeInterval(timeExtent,2,'esriTimeUnitsYears');
timeSlider.setThumbMovingRate(2000);
//Show a single point in time
timeSlider.singleThumbAsTimeInstant(true);
timeSlider.startup();
var labels = dojo.map(timeSlider.timeStops, function(timeStop,i){
if(i%2 === 0){
return timeStop.getUTCFullYear(); }
else{
return "";
}
});
timeSlider.setLabels(labels);
//This sets the position of the slider bar.
//timeSlider.setThumbIndexes([16]) will force the bar to move to 1953
timeSlider.setThumbIndexes([0]);
//Now over-write the current time (which is 1921 by default) with a new value
var newTime = new esri.TimeExtent();
newTime.startTime = new Date("01/01/1953 UTC");
newTime.endTime = new Date("01/01/1953 UTC");
//Set the map's time extent to 1953
map.setTimeExtent(newTime);
//Report the time extent - note that the time slider has not updated
var startValString = map.timeExtent.startTime.getUTCFullYear();
var endValString = map.timeExtent.endTime.getUTCFullYear();
dojo.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>";
dojo.connect(timeSlider, "onTimeExtentChange", function(timeExtent) {
var startValString = timeExtent.startTime.getUTCFullYear();
var endValString = timeExtent.endTime.getUTCFullYear();
dojo.byId("daterange").innerHTML = "<i>" + startValString + " to " + endValString + "<\/i>";
});
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<div>Showing: <span id="daterange"></span></div>
<div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
<div id="timeSliderDiv"></div>
</body>
</html>
