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.