Hi, @roemhildtg
Thanks for the time slider widget code. Here is a change i want to make, the reason is i have other widget that use the same bottom pane (export, search, etc). So i am thinking to change your code a little bit, but no luck so far. Could you please take a look at the following to see what else i am missing?
Basically, instead of set the div in the viewer.js setting part, I put it in the code, see the section
//////////////////////
//////////////////////
Thanks
define([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dojo/_base/lang',
'dojo/_base/array',
'esri/TimeExtent',
'esri/dijit/TimeSlider',
'dijit/_Container',
'dojo/query',
'dijit/registry',
'dojo/topic',
'dijit/layout/ContentPane'
], function(declare, _WidgetBase, lang, array, TimeExtent, TimeSlider, _Container, query, registry, topic, ContentPane) {
var pane;
return declare([_WidgetBase, _Container], {
map: null,
startTime: new Date('1/1/1921'),
endTime: new Date('12/31/2016'),
timeSlider: null,
timeExtent: null,
timeInterval: 2,
timeIntervalUnits: 'esriTimeUnitsYears',
timeSliderProperties: {},
postCreate: function() {
this.inherited(arguments);
if(!this.map){
return false;
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
if (!pane)
{
var tabsid = query(".attributesTabContainer")[0].id;
var tabs = registry.byId(tabsid);
pane = new ContentPane({ title: "Time Slider", content: '<div id="timeSlider" style="height:100%;"></div>' });
tabs.addChild(pane);
tabs.selectChild(pane);
}
//open the bottom pane
topic.publish('viewer/togglePane', {
pane: 'bottom',
show: 'block'
});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
this.timeSlider = new TimeSlider(lang.mixin({
style: 'width:100%;'
}, this.timeSliderProperties));
this.map.setTimeSlider(this.timeSlider);
this.timeExtent = lang.mixin(new TimeExtent(), {
startTime: this.startTime,
endTime: this.endTime
});
this.timeSlider.setThumbCount(2);
this.timeSlider.createTimeStopsByTimeInterval(
this.timeExtent,
this.timeInterval,
this.timeIntervalUnits
);
this.timeSlider.setThumbIndexes([0,1]);
this.timeSlider.setThumbMovingRate(2000);
this.addChild(this.timeSlider);
},
startup: function() {
this.inherited(arguments);
this.timeSlider.startup();
this.setLabels();
},
setLabels: function() {
//add labels for every other time stop
var labels = array.map(this.timeSlider.timeStops, function(timeStop, i) {
if ( i % 2 === 0 ) {
return timeStop.getUTCFullYear();
} else {
return "";
}
});
this.timeSlider.setLabels(labels);
});