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.
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;
..........
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
Byron,
Are you adding the code to the stemApp widgets folder or your actual apps widgets folder?
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
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.
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
Byron,
Yes in my testing it worked fine for me so I am not sure what else to tell you.
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