stevel

Unable to set TimeSlider time stops manually

Discussion created by stevel on Sep 9, 2010
Latest reply on Sep 23, 2010 by stevel
I'm trying to modify the sample at http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/time_sliderwithdynamiclayer.html so that the tick marks on the Time Slider are set manually.

The timeSlider class has a method setTimeStops(timeStops) but I'm getting an error message when I try to use the example code given.

My full code is below. When running this code, the labels don't appear and the message "this.fullTimeExtent is undefined" appears in FireBug when I change the time extent.

Thanks for any advice,
Steve

(edited to remove references to Map and TimeSlider from within initSlider function as they are global)

<!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>Time Slider Test</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 timeSlider;
var map;

      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) {
        //var map = this;
//var timeSlider = new esri.dijit.TimeSlider({style: "width: 1000px;"},dojo.byId("timeSliderDiv"));
timeSlider = new esri.dijit.TimeSlider({style: "width: 1000px;"},dojo.byId("timeSliderDiv"));
        var timeExtent = new esri.TimeExtent();
        map.setTimeSlider(timeSlider);       
               
//        timeExtent.startTime = new Date("1/1/1970 UTC");
//        timeExtent.endTime = new Date("12/31/1976 UTC");
        timeSlider.setThumbCount(1);
//        timeSlider.createTimeStopsByTimeInterval(timeExtent,2,'esriTimeUnitsYears');

        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);

        timeSlider.setThumbIndexes([0]);
        timeSlider.setThumbMovingRate(2000);
        timeSlider.singleThumbAsTimeInstant(false)
        timeSlider.startup();
        var labels = dojo.map(timeSlider.timeStops, function(timeStop,i){
          if(i%2 === 0){
            return timeStop.getUTCFullYear(); }
          else{
            return "";
          }
        });     
        timeSlider.setLabels(labels);
       
      }
     
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    <div id="map" style="width:100%; height:100%; border:1px solid #000;"></div>
    <div id="timeSliderDiv"></div>
  </body>
</html>

Outcomes