TimeSlider2016

If you want to drain your map content you can also use the TimeSlidertool. It is an alternative to the TimeExtentTool. Both are useful for filtering your map content.

You configurate this tool textual by using a JSON-object.

Configurable is the activating (toolBotton), the positioning (style), the range (roolRange), the representation of the time bar and the title (rendering), the count of the sliders (thumbCount, value: 1 or 2) and the velocity of yout animation (thumbMovingRate, values in milliseconds).

If you want to use just one slider the flag singleThumbAsTimeInstant has to be 'true' (values: true or false). if the thumbCount has not the value '1' it won't be regarded.

Note:
If you only activate one slider (thumbCount:1) there are going to be displayed just the features which are activated at this moment. For example, for a granularity of several years all feature from the 1st January of the respective year at 00:00 are displayed. Features from the 2nd January or 1st January at any other time than 00:00 won't be displayed. This behavior applies to every other granularity, e.g. months, decades or centuries.

If there isn't any decoration requested, it is possible to disable it by using sliderDecorationOff (values: true or false).

'style' selections include CSS properties. The notation is written in CamelCase. That means, that dashes are not allowed. Instead of 'margin-left' it has to be 'marginLeft'.

The values for the positioning can be quoted in percent or as an absolute number.

 {
"toolButton": {...},
"style": {...},
"toolRange": {...},
"rendering": {...},
"thumbCount": 2,
"thumbMovingRate": 2000,
"singleThumbAsTimeInstant": false,
"sliderDecorationOff": false
}
"toolButton": {
"toolBar": false,
"style": {
"left": "23px",
"bottom": "50px"
}
}

The segment toolBotton is an optional statement. If you configurated the tool it is permanently visable and activated. The button can be displayed in the toolbar or it can be stationed at any place in the map. If the TimeSliderTool is deactivated by pressing the button, there isn't going to be any temporal filtering in the map.

"style": {
"bottom": "20px",
"left": "25%",
"width": "50%"
}

The segment style is applied to the panel. This is an optional statement.The presettings station the TimeSliderTool in the lower edge of your screen. It fulfills the whole width of you screen.

In the following example, the tool is centrally stationed with a gap of 20 pixels to the lower edge of your screen and it only fulfills half of the width of your screen.

"toolRange": {
"startTime": "2/12/2016 UTC",
"endTime": "2/31/2016 UTC"
}

in the segment toolRange it is possible to define the requested interval. Allowed are strings with a numeric timestamp. The strings have to be in the date format 'ISO 8601 '

"rendering": {
"default": {
"timeUnit": "esriTimeUnitsDays",
"unitsPerTick": 1,
"tickLabelQuotient": 2,
"thumbIndexes": [0, 1],
"singleDateCaption": "Die Karte am {0}",
"dateIntervalCaption": "Die Karte vom {0} bis {1}",
"formatSingleDateCaption": "dd.MM.",
"formatDateIntervalCaption": "dd.MM.",
"formatTickLabel": "dd.MM."
},
"esriTimeUnitsHours": {
"minTickGap": 10,
"minLabelGap": 30,
"thumbIndexes": [0, 1],
"singleDateCaption": "Die Karte am {0}",
"dateIntervalCaption": "Die Karte von {0} bis {1}",
"formatSingleDateCaption": "dd.MM. 'um' HH:mm 'Uhr'",
"formatDateIntervalCaption": "dd.MM. HH:mm 'Uhr'",
"formatTickLabel": "HH:mm"
},
...
}

If the width is stated absolutely the default depiction is displayed. By using a relatively width the granularity of the time bar and their labelling is chosen dynamicly. It is possible to define an own definition block for every time unit. The time units are the following:

"esriTimeUnitsMilliseconds", "esriTimeUnitsSeconds", "esriTimeUnitsMinutes", "esriTimeUnitsHours",

"esriTimeUnitsDays", "esriTimeUnitsWeeks", "esriTimeUnitsMonths", "esriTimeUnitsYears",

"esriTimeUnitsDecades", "esriTimeUnitsCenturies"

Including to that the labelling can be defined for an instant of time or a time interval (singleDateCaption, dateIntervalCaption). Every dummy is going to be replaced by the date that has been formatted (formatSingleDateCaption, formatDateIntervalCaption). The syntax is described here: https://dojotoolkit.org/reference-guide/1.10/dojo/date/locale/format.html

For positioning the sliders initially it is required to name the tick position (thumbIndexes)

For using the static default block it is necessary to indicate the temporal resolution (timeUnit) and the quantity of the unit of time per tick (unitsPerTick). tickLabelQuotient defines which lines in the time line are labelled. Those three properties are missing in the other blocks.

minTickGap and minLabelGap are two indications for the minimum distance of lines and labels. By using those conditions and the relatively width of the tool the missing properties of the default block are calculated.

The labelling of the ticks begins with the first tick. If this tick has an odd value, it is possible to set the first tick as an labelled date. This labelled date has to be defined with the parameter firstLabelledDate for every block of granularity.

In the following you can see an example of a configuration:

example
{
"toolButton": {
"toolBar": false,
"style": {
"left": "23px",
"bottom": "50px"
}
},
"style": {
"bottom": "20px",
"left": "25%",
"width": "50%"
},
"toolRange": {
"startTime": "2/12/2016 UTC",
"endTime": "2/31/2016 UTC"
},
"rendering": {
"default": {
"timeUnit": "esriTimeUnitsDays",
"unitsPerTick": 1,
"tickLabelQuotient": 2,
"singleDateCaption": "Die Karte am {0}",
"dateIntervalCaption": "Die Karte vom {0} bis {1}",
"formatSingleDateCaption": "dd.MM.",
"formatDateIntervalCaption": "dd.MM.",
"formatTickLabel": "dd.MM."
},
"esriTimeUnitsHours": {
"minTickGap": 10,
"minLabelGap": 30,
"thumbIndexes": [
0,
1
],
"singleDateCaption": "Die Karte am {0}",
"dateIntervalCaption": "Die Karte von {0} bis {1}",
"formatSingleDateCaption": "dd.MM. 'um' HH:mm 'Uhr'",
"formatDateIntervalCaption": "dd.MM. HH:mm 'Uhr'",
"formatTickLabel": "HH:mm"
},
"esriTimeUnitsDays": {
"minTickGap": 10,
"minLabelGap": 30,
"thumbIndexes": [
0,
1
],
"singleDateCaption": "Die Karte am {0}",
"dateIntervalCaption": "Die Karte vom {0} bis {1}",
"formatSingleDateCaption": "dd.MM.",
"formatDateIntervalCaption": "dd.MM.",
"formatTickLabel": "dd.MM."
},
"esriTimeUnitsMonths": {
"minTickGap": 10,
"minLabelGap": 30,
"thumbIndexes": [
0,
1
],
"singleDateCaption": "Die Karte im {0}",
"dateIntervalCaption": "Die Karte von {0} bis {1}",
"formatSingleDateCaption": "MMMM y",
"formatDateIntervalCaption": "MMM y",
"formatTickLabel": "MMM"
},
"esriTimeUnitsYears": {
"firstLabelledDate": "1/1/1000 UTC",
"minTickGap": 10,
"minLabelGap": 30,
"thumbIndexes": [
0,
1
],
"singleDateCaption": "Die Karte {0}",
"dateIntervalCaption": "Die Karte von {0} bis {1}",
"formatSingleDateCaption": "y",
"formatDateIntervalCaption": "y",
"formatTickLabel": "y"
}
},
"thumbCount": 2,
"thumbMovingRate": 2000,
"singleThumbAsTimeInstant": false,
"sliderDecorationOff": false
}