bug? Calling map.SetTimeExtent should update TimeSlider position

StephenLead — Tue, 14 Sep 2010 06:06:37 GMT

I want to open a time-aware map at a particular time. This works using map.SetTimeExtent - but I'm finding that the associated timeSlider bar does not update to the correct position.

See the sample code below for a demonstration. (It's kind of hard to tell but the map is actually showing 1953 when it opens - see the single well on the "Kearney County" label).

As far as I can tell, the problem is that calling map.SetTimeExtent(timeExtent) does not call timeSlider.SetThumbIndexes with the appropriate array position.

Do you know of a workaround, short of manually calculating the appropriate TimeSlider thumb index and applying this?

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>Set map to given time</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 map;
      var timeSlider;
      
      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) {
        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/1921 UTC");
        timeExtent.endTime = new Date("12/31/2009 UTC");
        timeSlider.setThumbCount(1);
        timeSlider.createTimeStopsByTimeInterval(timeExtent,2,'esriTimeUnitsYears');
        timeSlider.setThumbMovingRate(2000);
 
        //Show a single point in time
        timeSlider.singleThumbAsTimeInstant(true);
        
        timeSlider.startup();
        var labels = dojo.map(timeSlider.timeStops, function(timeStop,i){
          if(i%2 === 0){
            return timeStop.getUTCFullYear(); }
          else{
            return "";
          }
        });      
        timeSlider.setLabels(labels);
        
        //This sets the position of the slider bar.
        //timeSlider.setThumbIndexes([16]) will force the bar to move to 1953
        timeSlider.setThumbIndexes([0]);

        //Now over-write the current time (which is 1921 by default) with a new value     
        var newTime = new esri.TimeExtent();
        newTime.startTime = new Date("01/01/1953 UTC");
        newTime.endTime = new Date("01/01/1953 UTC");

        //Set the map's time extent to 1953
        map.setTimeExtent(newTime);
        
        //Report the time extent - note that the time slider has not updated
        var startValString = map.timeExtent.startTime.getUTCFullYear();
        var endValString = map.timeExtent.endTime.getUTCFullYear();
        dojo.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString  + "<\/i>";
        
      
        dojo.connect(timeSlider, "onTimeExtentChange", function(timeExtent) {
          var startValString = timeExtent.startTime.getUTCFullYear();
          var endValString = timeExtent.endTime.getUTCFullYear();
          dojo.byId("daterange").innerHTML = "<i>" + startValString + " to " + endValString  + "<\/i>";
        });

      }
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    <div>Showing: <span id="daterange"></span></div>

    <div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
    <div id="timeSliderDiv"></div>
  </body>
</html>

Re: bug? Calling map.SetTimeExtent should update TimeSlider position

martinschmoll — Wed, 12 Dec 2012 14:45:20 GMT

As far as I can tell, the problem is that calling map.SetTimeExtent(timeExtent) does not call timeSlider.SetThumbIndexes with the appropriate array position.

Do you know of a workaround, short of manually calculating the appropriate TimeSlider thumb index and applying this?

I've run into the same problem. Did you do the manual workaround?

Re: bug? Calling map.SetTimeExtent should update TimeSlider position

StephenLead — Sun, 12 Dec 2021 07:02:22 GMT

Hi Martin,

It's been a few years since I looked at this, so I've forgotten how I resolved it.

The page I was working on 2 years ago is at http://atlas.nsw.gov.au/public/nsw/home/map/elections.html

If you search for (and put a break on) the line timeSlider.setThumbIndexes it looks like I set an array of the known dates which should have a marker

[ATTACH=CONFIG]19891[/ATTACH]

I then assign these as the timeStops:

timeSlider.setThumbIndexes(theme.timeAware.startIndex);
if (theme.timeAware.timeStops) {
  timeSlider.setTimeStops(theme.timeAware.timeStops)
}

Does that help?

Cheers,
Steve

topic bug? Calling map.SetTimeExtent should update TimeSlider position in ArcGIS JavaScript Maps SDK Questions

bug? Calling map.SetTimeExtent should update TimeSlider position

Re: bug? Calling map.SetTimeExtent should update TimeSlider position

Re: bug? Calling map.SetTimeExtent should update TimeSlider position