Time Slider Widget Customization - Single handle

1977
8
09-05-2017 06:39 AM
ByronMoldofsky
New Contributor II

I posted this as a discussion but only got one reply, so maybe better as a question. The Time Slider widget appears with two handles or thumbs to define the time period shown on the map. However in many cases for historical data we want to show a "snapshot" i.e. the situation at a single point in time, not over a period, and certainly not over an adjustable period. For example, to show a single census year's data you don't want to bracket more than one decade. The two handles can be brought together, but this may be confusing for the user. I have looked into the Time Slider widget code but cannot find a straightforward way of customizing this. I have also looked through the list of custom Widgets and cannot find it. Anyone tried this or can point me in the right direction? thanks.

8 Replies
RobertScheitlin__GISP
MVP Emeritus

Byron,

   In the Widget.js file find the getTimeSliderProps function and make this simple addition (line 11):

      getTimeSliderProps: function() {
        if (!this._timeSliderPropsDef) {

          this._timeSliderPropsDef = new Deferred();
          this.own(this._timeSliderPropsDef);
          //var itemInfo = map && map.itemInfo;
          this.timeProcesser.getTsPros().then(lang.hitch(this, function (tsProps) {
            if (null !== tsProps &&
              (this.timeProcesser.needUpdateFullTime() || true === tsProps._needToFindDefaultInterval)) {
              this.timeProcesser._getUpdatedFullTime().then(lang.hitch(this, function (fullTimeExtent) {
                tsProps.thumbCount = 1;‍‍‍‍‍‍‍‍‍‍‍
        ..........
0 Kudos
ByronMoldofsky
New Contributor II

Hello Robert:
Thanks very much for the reply. I added the one line as you suggested to the getTimeSliderProps function but this did not appear to change anything effectively on the widget. The  I am copying the whole function below to make sure I am not missing something else. 

getTimeSliderProps: function() {
if (!this._timeSliderPropsDef) {

this._timeSliderPropsDef = new Deferred();
this.own(this._timeSliderPropsDef);
//var itemInfo = map && map.itemInfo;
this.timeProcesser.getTsPros().then(lang.hitch(this, function (tsProps) {
if (null !== tsProps &&
(this.timeProcesser.needUpdateFullTime() || true === tsProps._needToFindDefaultInterval)) {
this.timeProcesser._getUpdatedFullTime().then(lang.hitch(this, function (fullTimeExtent) {
// Next line added to reduce handles to only one - see Geonet response R. Scheitlin
tsProps.thumbCount = 1;
var start = fullTimeExtent.startTime.getTime();
var end = fullTimeExtent.endTime.getTime();

if (tsProps.startTime > end || tsProps.endTime < start) {
tsProps.startTime = start;
tsProps.endTime = end;
} else {
if (tsProps.startTime < start) {
tsProps.startTime = start;
}
if (tsProps.endTime > end) {
tsProps.endTime = end;
}
}

if (true === tsProps._needToFindDefaultInterval) {
tsProps.timeStopInterval = this.timeProcesser.findDefaultInterval(fullTimeExtent);
}

this._timeSliderPropsDef.resolve(tsProps);
}));
} else {
this._timeSliderPropsDef.resolve(tsProps);
}
}));
}

return this._timeSliderPropsDef;
},

Thanks for any further suggestions you can make.

Byron

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Byron,


  Are you adding the code to the stemApp widgets folder or your actual apps widgets folder?

0 Kudos
ByronMoldofsky
New Contributor II

Robert: stemapp widget folder:
C:\arcgis_web_appbuilder_2.5\WebAppBuilderForArcGIS\client\stemapp\widgets
Is that incorrect? Some other customizations do seem to be working.

thanks

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

That folder is correct if you have not already added the widget to your app or you are creating a new app. If you are working with an existing app you need to make the edits to the apps widgets folder.

0 Kudos
ByronMoldofsky
New Contributor II

Right. I created a new app from scratch and tried the widget but I still get two handles. I assume that your line of code worked for you? So I am not sure what is incorrect.

There was another question on this site that suggested a change to the setThumbIndexes values:
https://community.esri.com/message/592667 

However that did not work for me either.

Any advice much appreciated.
thanks

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Byron,

   Yes in my testing it worked fine for me so I am not sure what else to tell you.

0 Kudos
ByronMoldofsky
New Contributor II

Hi again:

I did not get your solution to work, but I was directed to an alternative in the Javascript API by an ESRI staff member. This seems custom-made for the situation where one wants the time slider to reference a single date or time rather than a range. It is counter intuitive in that it only works when the time layer on the map is configured as cumulative or "progressive." It is the timeSlider.singleThumbAsTimeInstant() function. See:
TimeSlider | API Reference | ArcGIS API for JavaScript 3.21 
Thanks again.
Byron