Timeline Control
Timeline control allows playing datetimes as animation with linear interpolation between two subsequent datetimes
Example

import * as WeatherLayers from 'weatherlayers-gl';
const files = [
{ datetime: '2021-09-01T20:00:00Z', url: '...' },
{ datetime: '2021-09-01T21:00:00Z', url: '...' },
{ datetime: '2021-09-01T22:00:00Z', url: '...' },
];
const datetimes = files.map(file => file.datetime);
let currentDatetime = datetimes[0];
const timelineControl = new WeatherLayers.TimelineControl({
datetimes: datetimes,
datetime: currentDatetime,
onPreload: datetimes => {
// preload requested data
return Promise.all(datetimes.map(datetime => {
return WeatherLayers.loadTextureData(files.find(file => file.datetime === datetime).url);
});
},
onUpdate: datetime => {
// update displayed data
currentDatetime = datetime;
update();
},
});
timelineControl.addTo(document.getElementById('controls'));
async function update() {
const startDatetime = WeatherLayers.getClosestStartDatetime(datetimes, currentDatetime);
const endDatetime = WeatherLayers.getClosestEndDatetime(datetimes, currentDatetime);
const imageWeight = WeatherLayers.getDatetimeWeight(startDatetime, endDatetime, currentDatetime);
const image = await WeatherLayers.loadTextureData(files.find(file => file.datetime === startDatetime).url);
const image2 = await WeatherLayers.loadTextureData(files.find(file => file.datetime === endDatetime).url);
// update layers
deckgl.setProps({
layers: [
new WeatherLayers.XxxLayer({
image: image,
image2: image2,
imageWeight: imageWeight,
}),
],
});
}
update();
Constructor
TimelineControl(config: TimelineConfig = {})
TimelineControl(config: TimelineConfig = {})
Config Properties
width
width
Type: number, optional
Default: 300
Width of the control.
datetimes
datetimes
Type: DatetimeISOString
[]
, required
Datetimes to be displayed in the timeline.
datetimeInterpolate
datetimeInterpolate
Type: boolean, optional
Default: true
datetime
datetime
Type: DatetimeISOString
, required
Current datetime selected in the timeline.
onPreload
onPreload
Type: (datetimes:
DatetimeISOString
[]) => Promise<void>[] | Promise<void>
, optional
Preload callback, use for preloading requested data.
If an array of promises is returned, the progress is displayed in the loader text.
onUpdate
onUpdate
Type: (datetime:
DatetimeISOString
) => void
, optional
Update callback, use for updating displayed data.
fps
fps
Type: number, optional
Default: 15
Timeline animation speed, in frames per seconds. Lower number is slower animation, higher number is faster animation.
Methods
See Control for common Control methods.
toggle(running?: boolean): Promise<void>
toggle(running?: boolean): Promise<void>
Toggles (starts or pauses) the timeline animation.
Before starting, it calls and awaits onPreload
with all datetimes.
start(): Promise<void>
start(): Promise<void>
Starts the timeline animation.
Before starting, it calls and awaits onPreload
with all datetimes.
pause(): void
pause(): void
Pauses the timeline animation.
stop(): void
stop(): void
Stops (pauses and resets) the timeline animation.
reset(): void
reset(): void
Resets the timeline animation.
stepBackward(): Promise<void>
stepBackward(): Promise<void>
Steps backward in the timeline animation.
Before stepping, it calls and awaits onPreload
with datetimes required to display the requested step.
stepForward(): Promise<void>
stepForward(): Promise<void>
Steps forward in the timeline animation.
Before stepping, it calls and awaits onPreload
with datetimes required to display the requested step.
Last updated