topic Re: Unable to set TimeSlider time stops manually in ArcGIS JavaScript Maps SDK Questions

Unable to set TimeSlider time stops manually

StephenLead — Fri, 10 Sep 2010 04:42:54 GMT

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>

Re: Unable to set TimeSlider time stops manually

KellyHutchins — Fri, 10 Sep 2010 16:16:39 GMT

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

Re: Unable to set TimeSlider time stops manually

StephenLead — Sun, 12 Sep 2010 22:10:11 GMT

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

Re: Unable to set TimeSlider time stops manually

KellyHutchins — Mon, 13 Sep 2010 15:23:54 GMT

Here's the bug tracking number:
NIM061060

This should be fixed in 2.1.

Re: Unable to set TimeSlider time stops manually

StephenLead — Sat, 11 Dec 2021 18:25:55 GMT

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>