> For the complete documentation index, see [llms.txt](https://docs.weatherlayers.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.weatherlayers.com/weatherlayers-gl/controls/timeline-control.md).

# Timeline Control

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

### Example

![Timeline Control](/files/43j6o6fQe8Mw93WsObhf)

<pre class="language-javascript"><code class="lang-javascript">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);
<strong>  const image = await WeatherLayers.loadTextureData(files.find(file => file.datetime === startDatetime).url);
</strong>  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();
</code></pre>

### Constructor

#### `TimelineControl(config: TimelineConfig = {})`

### Config Properties

#### `width`

Type: number, optional

Default: 300

Width of the control.

#### `datetimes`

Type: [`DatetimeISOString`](/weatherlayers-gl/types.md#datetimeisostring)`[]`, required

Datetimes to be displayed in the timeline.

#### `datetimeInterpolate`

Type: boolean, optional

Default: true

#### `datetime`

Type: [`DatetimeISOString`](/weatherlayers-gl/types.md#datetimeisostring), required

Current datetime selected in the timeline.

#### `onPreload`

Type: `(datetimes:` [`DatetimeISOString`](/weatherlayers-gl/types.md#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`

Type: `(datetime:` [`DatetimeISOString`](/weatherlayers-gl/types.md#datetimeisostring)`) => void`, optional

Update callback, use for updating displayed data.

#### `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](/weatherlayers-gl/controls/control.md) for common Control methods.

#### `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>`

Starts the timeline animation.

Before starting, it calls and awaits `onPreload` with all datetimes.

#### `pause(): void`

Pauses the timeline animation.

#### `stop(): void`

Stops (pauses and resets) the timeline animation.

#### `reset(): void`

Resets the timeline animation.

#### `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>`

Steps forward in the timeline animation.

Before stepping, it calls and awaits `onPreload` with datetimes required to display the requested step.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.weatherlayers.com/weatherlayers-gl/controls/timeline-control.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.