Using Time Slider for featurelayer created from points

[DavidChevrier]

Hi,

   I am converting a website I did using the silverlight api to the javascript 3.20 api.  The old site maps fish species caught on our surveys.  When a user selects a species, the site goes to oracle, gets the lat/lon and some attributes and creates a feature layer from the results and adds it to the map.  I was able to use the silverlight TimeSlider class to easily sync it with the data.

    I'm trying to do the same thing with the javascript api and it doesn't seem possible.  I'm confused as to why an outdated api could do this and not the javascript one.  I'm hoping it is just user error on my part. The only thing I can come up with is to create a time slider and use the events when it is changed to re-query the data and re-create the layer, which is entirely too slow and not efficient. 

   I was wondering if I am not doing this right, or if there is a work-around I am not thinking of or if this is an issue soon to be addressed a future update.  Below is the code I'm using to create the feature layer.  Any help would be greatly appreciated.

Thanks,

dave

// get data for selected species and create and symbolize feature layer

 function speciesSelected() {

     // selected code and species need for oracle query
      var species = dijit.byId('selectSpecies').attr('displayedValue');
      var svspp = dijit.byId('selectSpecies').attr('value');

      // make sure they were successfully passed
      if ((species == "") || (svspp == "")) {
            return;
       }
       

       var features = [];
       var oReq = new XMLHttpRequest();
       oReq.onreadystatechange = function () {
             if (oReq.readyState == 4 && oReq.status == 200) {

                   var speciesData = oReq.responseText;

                   var lines = speciesData.split("\n");
                   for (var i = 0; i < (lines.length - 1) ; i++) {
                         var receivedData = lines.split(",");
                         var attr = {};
                         attr["ObjectID"] = i + 1;
                         attr["expNum"] = Number(receivedData[2]);
                         attr["expWT"] = Number(receivedData[3]);
                         attr["SEASON"] = receivedData[4];
                         attr["DATE"] = receivedData[5];
                         attr["YEAR"] = Number(receivedData[6]);

                         var lon = Number(receivedData[0]);
                         var lat = Number(receivedData[1]);
                         var geometry = new Point(lon, lat, new SpatialReference({ wkid: 4326 }));

                         var graphic = new Graphic(geometry);
                               graphic.setAttributes(attr);
                               features.push(graphic);
                         }

                         var featureSet = new FeatureSet();
                         featureSet.features = features;
                         featureSet.geometryType = "esriGeometryPoint";

                         var layerDefinition = {
                               "geometryType": "esriGeometryPoint",
                               "objectIdField": "ObjectID",
                               "fields": [{
                                     "name": "ObjectID",
                                     "alias": "ObjectID",
                                     "type": "esriFieldTypeOID"
                               }, {
                                     "name": "expNum",
                                     "alias": "expNum",
                                     "type": "esriFieldTypeDouble"
                               }, {
                                     "name": "expWT",
                                     "alias": "expWT",
                                     "type": "esriFieldTypeDouble"
                               }, {
                                     "name": "SEASON",
                                     "alias": "SEASON",
                                     "type": "esriFieldTypeString"
                               }, {
                                     "name": "DATE",
                                     "alias": "DATE",
                                     "type": "esriFieldTypeDate"
                               }, {
                                     "name": "YEAR",
                                     "alias": "YEAR",
                                     "type": "esriFieldTypeInteger"
                               }]
                         };

                         var featureCollection = {
                               layerDefinition: layerDefinition,
                               featureSet: featureSet
                         };

                         // Remove old layer if one was previously added
                         var speciesFeatureLayerDelete = map.getLayer('Species Layer');
                         if (speciesFeatureLayerDelete) {
                               map.removeLayer(speciesFeatureLayerDelete);
                         }

                         speciesFeatureLayer = new FeatureLayer(featureCollection, {
                               "id": "Species Layer",
                               "mode": FeatureLayer.MODE_SNAPSHOT,
                               "infoTemplate": popupTemplate,
                               "outfields": outFields
                         });

                        // get max and min lat and lon to set extent for zooming since featurelayer.fullExtent returns null even after loaded

                        var oReq1 = new XMLHttpRequest();
                        oReq1.onreadystatechange = function () {
                              if (oReq1.readyState == 4 && oReq1.status == 200) {
                                    var maxMinLonLatData = oReq1.responseText;
                                    var receivedmmllData = maxMinLonLatData.split(",");
                                    var spatialRef = new SpatialReference({ wkid: 4326 });
                                    var layerExtent = new Extent();
                                    layerExtent.xmax = Number(receivedmmllData[0]);
                                    layerExtent.xmin = Number(receivedmmllData[1]);
                                    layerExtent.ymax = Number(receivedmmllData[2]);
                                    layerExtent.ymin = Number(receivedmmllData[3]);
                                    layerExtent.spatialReference = spatialRef;

                                    map.setExtent(layerExtent);
                                    createRenderer();
                                    map.addLayers([speciesFeatureLayer]);
                              }
                        }
                        oReq1.open("GET", "retrieveMaxMinLonLat.php?svspp=" + svspp + "&seasonQuery=" + currentSeason, true);
                        oReq1.send();

            }

      }
      oReq.open("GET", "retrieveSpeciesData.php?svspp=" + svspp + "&seasonQuery=" + currentSeason, true);
      oReq.send();
}

//  create renderer for species feature layer

function createRenderer() {
      smartMapping.createClassedSizeRenderer({
            layer: speciesFeatureLayer,
            field: currentDisplayField,
            basemap: "oceans",
            classificationMethod: currentClassification,
            showOthers: true,
            numClasses: 5
       }).then(function (response) {
             speciesFeatureLayer.setRenderer(response.renderer);
             speciesFeatureLayer.redraw();
             createLegend();
       });
}

// this code was taken from the example page and isn't completely done, but still shows that it isn't working

function initSlider() {
      var timeSlider = new TimeSlider({
            style: "width: 100%;"
      }, dom.byId("timeSliderDiv"));
      map.setTimeSlider(timeSlider);

      var timeExtent = new TimeExtent();
      timeExtent.startTime = new Date("1/1/1921 UTC");
      timeExtent.endTime = new Date("12/31/2009 UTC");
      timeSlider.setThumbCount(2);
      timeSlider.createTimeStopsByTimeInterval(timeExtent, 2, "esriTimeUnitsYears");
      timeSlider.setThumbIndexes([0, 1]);
      timeSlider.setThumbMovingRate(2000);
      timeSlider.startup();

      //add labels for every other time stop
      var labels = array.map(timeSlider.timeStops, function (timeStop, i) {
            if (i % 2 === 0) {
                  return timeStop.getUTCFullYear();
            } else {
                  return "";
            }
      });

      timeSlider.setLabels(labels);

      timeSlider.on("time-extent-change", function (evt) {
            var startValString = evt.startTime.getUTCFullYear();
            var endValString = evt.endTime.getUTCFullYear();
            dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>";
      });
}

[TomSellsted]

David,

I believe you also need to set the time extent for the featurelayer too.  To set the time definition please look at:

FeatureLayer | API Reference | ArcGIS API for JavaScript 3.20 

You may also need to set the map time extent.

Map | API Reference | ArcGIS API for JavaScript 3.20 

Regards,

Tom