Community

Unable to set TimeSlider time stops manually

1094
4
09-09-2010 09:42 PM
StephenLead
by
Regular Contributor III
‎09-09-2010 09:42 PM
I'm trying to modify the sample at http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/time_sliderwit... 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>
0 Kudos
4 Replies
KellyHutchins
by Esri Frequent Contributor
Esri Frequent Contributor
‎09-10-2010 09:16 AM
Looks like a bug in the time slider. I submitted a new bug for this issue. It does work if you set two thumbs, so if it works for your scenario that's one potential workaround:

timeSlider.setThumbCount(2);
0 Kudos
StephenLead
by
Regular Contributor III
‎09-12-2010 03:10 PM
Looks like a bug in the time slider. I submitted a new bug for this issue.


Thanks Kelly. Can you please let me know the bug tracking number?

Cheers,
Steve
0 Kudos
KellyHutchins
by Esri Frequent Contributor
Esri Frequent Contributor
‎09-13-2010 08:23 AM
Here's the bug tracking number:
NIM061060

This should be fixed in 2.1.
0 Kudos
StephenLead
by
Regular Contributor III
‎09-23-2010 09:17 PM
Hi Kelly,

This is fixed in 2.1 (thanks!) in the sense that the time stops are now positioned at the values entered by the user.

However, the time stops are spread out evenly across the time slider, not positioned proportionally along the line. Run the example below, and note the distance between 1970-78 is the same as from 1978-79.

In order to show the time extent realistically, the tick marks should be positioned proportionally.

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>Time Slider Test</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/tundra/tundra.css"> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>
<script type="text/javascript">
var djConfig = {parseOnLoad: true};

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,"spati alReference":{"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);
map.addLayers(layers);
dojo.connect(map,"onLayersAddResult",initSlider);
}

function initSlider(results) {
timeSlider = new esri.dijit.TimeSlider({style: "width: 1000px;"},dojo.byId("timeSliderDiv"));
var timeExtent = new esri.TimeExtent();
map.setTimeSlider(timeSlider);


timeSlider.setThumbCount(1);

var myTimeStepIntervals = [new Date("01/01/1970"), new Date("01/01/1978"), new Date("01/01/1979"), new Date("01/01/1989"), new Date("01/01/1994"),new Date("01/01/1995"), new Date("01/01/1996")];
timeSlider.setTimeStops(myTimeStepIntervals);

timeSlider.setThumbIndexes([0]);
timeSlider.setThumbMovingRate(2000);
timeSlider.singleThumbAsTimeInstant(true)
timeSlider.startup();
timeSlider.setLabels(["1970","1978","1979","1989","1994","1995","1996"]);

}

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>
0 Kudos