var timeLayers = []; dojo.connect(map, "onLayersAddResult", initSlider); timeLayers.push(resSolar); timeLayers.push(comSolar); map.addLayers(timeLayers);
//function to initialize the time slider function initSlider (results) { var timeLayers = dojo.map(results, function (result) { return result.layer; }); var timeExtent = new esri.TimeExtent(); timeExtent.startTime = new Date("1/1/2001 UTC"); timeExtent.endTime = new Date("1/31/2012 UTC"); map.setTimeExtent(timeExtent); var timeSlider = new esri.dijit.TimeSlider({}, dojo.byId("timeSlider")); map.setTimeSlider(timeSlider); timeSlider.setThumbCount(1); timeSlider.createTimeStopsByCount(timeExtent, 12); timeSlider.setThumbMovingRate(1000); timeSlider.setLoop(false); timeSlider.startup(); //add ticks just at beginning and end var labels = ['2001','2012']; timeSlider.setLabels(labels); dojo.connect(timeSlider, "onTimeExtentChange", function() { var end = results[0].layer.timeInfo.timeExtent.endTime; console.log(end); }); }Solved! Go to Solution.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Demo</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<script>var dojoConfig = { parseOnLoad: true }; </script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
<script language="Javascript">
dojo.require("esri.map");
dojo.require("esri.dijit.TimeSlider");
dojo.require("esri.layers.FeatureLayer");
var map;
function init() {
var startExtent = new esri.geometry.Extent({"xmin":-13740877.445278011,"ymin":5653763.518179012,"xmax":-13588003.3887076,"ymax":5745487.95212126,"spatialReference":{"wkid":102100}});
map = new esri.Map("map", {
basemap: "streets",
extent: startExtent
});
var infoTemplate = new esri.InfoTemplate("Attributes", "${*}");
var fl = new esri.layers.FeatureLayer("http://cgisagsec2.portlandoregon.gov/arcgis/rest/services/BPS/solar_pdx/MapServer/0",{
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
infoTemplate: infoTemplate
});
map.addLayers([fl]);
dojo.connect(map, "onLayersAddResult", initSlider);
}
function initSlider() {
var 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/2009 UTC");
timeExtent.endTime = new Date("1/31/2012 UTC");
timeSlider.setThumbCount(2);
timeSlider.createTimeStopsByTimeInterval(timeExtent,1,'esriTimeUnitsMonths');
timeSlider.setThumbIndexes([0,1]);
timeSlider.setThumbMovingRate(2000);
timeSlider.startup();
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
<div id="timeSliderDiv"></div>
</body>
</html>
Ran a quick test using the second service and it worked for me. I used the same sample as posted above just switched out the url to the service.
Is there a reason why you don't want to use an ArcGISDynamicMapServiceLayer in this case? If you have a large number of features this may be a better approach.