Copy for LLM[View as Markdown](https://docs.planet.com/data/area-monitoring/visualizations/timelapse/) # Timelapse Timelapse *React* component displays the timelapse of the selected FOI image chips for the selected layer. Timelapse can either play through image chips automatically with a defined speed or the user can navigate it image chip by image chip. ![](/data/area-monitoring/visualizations/timelapse/timelapse_example.gif) ## User interactions The timelapse component has several elements with which the user can control it: * `(1)` drop-down list of layers to select a layer to be displayed in the timelapse component * `(2)` check-box list of FOI geometry types (original, pixelated) to be displayed in timelapse component * `(3)` button to generate and download timelapse GIF animation through all image chips * `(4)` date of the currently displayed image chip in the timelapse component * `(5)`/`(6)` button to manually navigate the timelapse component to the previous/next image chip * `(7)` button to play/pause timelapse animation through all image chips * `(8)` slider to manually navigate timelapse component through image chips * `(9)` sequence number of current image chip and number of all image chips * `(10)` button to control the speed of timelapse animation ![](/data/area-monitoring/visualizations/timelapse/timelapse_elements.webp) ## Timelapse API ### Usage ``` console.log('Date was selected:', date)} geometries={[ { geometry: geoJSONGeometry1, style: { strokeColor: 'white', lineWidth: 1, }, id: 'field', label: 'Field', }, { geometry: geoJSONGeometry2, style: { strokeColor: 'red', lineWidth: 1, }, id: 'pixelated', label: 'Pixelated field', }, ]} autoplay={true} paddingXPercent={10} paddingYPercent={10} width={450} height={350} enableGifExport={true} language="sl" dateFormat="DD/MM/YYYY" upsampling="BICUBIC" downsampling="BICUBIC" cacheDuration={300} /> ``` ### Component name The component name `Timelapse` should be used when providing the [*props*](#props). ### Props The *props* of the Timelapse *React* component are described in the table below. | Name | Type | Default | Description | | ----------------------- | --------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `baseUrl`\* | `string` | | Contains an OGC WMS compatible base URL address (for example, `https://services.sentinel-hub.com/ogc/wms/`). The address needs to support `GetCapabilities` call. | | `layers`\* | `array` | | Defines layers that can be displayed. For more details see [layers API in the timelapse API component](#layers-api-in-the-timelapse-api-component). | | `geometries`\* | `array` | | Defines geometries to be displayed. For more details see [the geometries API in the timelapse API component](#geometries-api-in-the-timelapse-api-component). | | `shAuthToken`\* | `string` or callback `(() => string)` | | Sentinel Hub authentication token. Either as a string or a function that returns a string. If using [sentinelhub-js](https://github.com/sentinel-hub/sentinelhub-js/), it can be obtained using `requestAuthToken` function. | | `amServicesAuthToken`\* | `string` or callback `(() => string)` | | AM services authentication token. Either as a string or a function that returns a string. | | `signalServiceUrl`\* | `string` | | The (base) AM signal service URL at which the endpoints for signals are (for example, `https://am-test.sinergise.com/signal/`). | | `scope`\* | `string` | | Reference data differentiator (for example, `SI22`). For more details see the [scope](https://docs.planet.com/data/area-monitoring/common.md#scope). | | `foiId`\* | `string` | | Fully qualified ID of a FOI (feature of interest; for example, `DEMO.FOI.7025947001`). | | `defaultTimespan`\* | `object` | | The default date range. Only used until a change is saved to `localStorage`. Fields `from` and `to` are strings that represent a date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format (for example, `{ from: '2020-01-01', to: '2020-01-31' }`). | | `width` | `number` or `string` | `100%` | Width (for example, `300`) of the component (and thus images) in pixels. | | `height` | `number` or `string` | `100%` | Height (for example, `300`) of the component (and thus images) in pixels. | | `paddingXPercent` | `number` or `string` | `10` | Percent of padding in the horizontal direction (for example, `10`). | | `paddingYPercent` | `number` or `string` | `10` | Percent of padding in the vertical direction (for example, `10`). | | `dateFormat` | `string` | | Date format (for example, `d. m. yyyy`). If not present and `language` is present, it will take the default selected language format. If both are not present defaults to `enUS`. See the accepted format guide [here](https://date-fns.org/v2.29.2/docs/format). | | `upsampling` | `string` | | Upsampling interpolator for image chip. Available options: `BILINEAR`, `BICUBIC`, `NEAREST` | | `downsampling` | `string` | | Downsampling interpolator for image chip. Available options: `BILINEAR`, `BICUBIC`, `NEAREST` | | `selectedDate` | `string` - compatible with [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format (`YYYY-MM-DD`) | | Contains the UTC date (for example, `2021-03-31`) that is used for the background image. If no image is available for this date then it will show the closest available image. | | `onDateSelect` | callback `((value: string \| null) => void)` | | Callback that receives a string or null value. | | `useValidSignal` | `boolean` (`true`/`false`) | | Indicator if all or only valid image chips should be displayed. For more details see [useValidSignal](#usevalidsignal). | | `autoplay` | `boolean` (`true`/`false`) | | Initial timelapse animation playing state setting when the component mounts for the first time. On subsequent loads, this setting is loaded from the browser's local storage. | | `lazyLoading` | `boolean` (`true`/`false`) | | If not present or if it is `false`, the timelapse will try to download all images. If it is `true`, timelapse will download only the first image, other images will be downloaded when the left/right arrow is pressed or when the animation is started by clicking the *play* button. | | `enableGifExport` | `boolean` (`true`/`false`) | | If `true`, it shows the button for exporting the timelapse animation as GIF. If `false` or not set, the button is not shown. | | `gifFilename` | `string` | | If provided, the exported GIF file will have that name (for example, `my_animation.gif`). If not provided, the exported GIF file will be named `timelapse.gif`. | | `language` | `string` | `en` | The selected language. Available options: `sl` - Slovenian, `en` - English, `de` - German | | `cacheDuration` | `number` or `string` | `300` | Cache duration in seconds (for example, `500`). | *\* indicates mandatory props* #### `useValidSignal` If not present or if it is `false`, the Timelapse will show images for all available dates from Sentinel Hub for the selected layer and area (around geometries) within the selected time range. If it is `true`, the Timelapse will filter out images for the dates that are marked as invalid in the response to AM signal service. The remaining dates will be the images for the dates that are not present in the response from AM signal service or are present and marked as valid. ### Layers API in the timelapse API component The `layers` prop contains an array of objects. The sort order of this array is not important, objects are sorted by `layerId` (alphabetically). Every object in the array contains properties described in the table below. | Property | Type | Description | | ------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `layerId`\* | `string` | Layer ID. Must be available at the `baseUrl` specified (unknown `layerId` is silently ignored - not available for selection in the component drop-down list). | | `validSignalTypeId` | `string` | Valid signal type ID in fully qualified identifier form. Must be available at the `signalServiceUrl` specified (unknown `validSignalTypeId` is silently ignored - invalid dates will not be filtered out). | | `geometryIds` | `array` | Contain the same `id`s as in `geometries` prop, the order is not important:
- if not present, all geometries in `geometries` will be rendered
- if `undefined`, `null` or `[]` (empty array), no geometries will be rendered
- if containing correct geometry IDs, the geometries with those IDs will be rendered
- if containing one or more IDs that no geometry in `geometries` parameter has, an error will be shown | *\* indicates mandatory properties* note Note that while there is no requirement that layer and valid signal type from the same object use the same collection, the dates for a valid signal type are only valid for a specific collection. In practice, the layer and valid signal type from the same object should be using the same collection. **Example** `layers`: ``` layers={[ { layerId: 'MY_LAYER_1', validSignalTypeId: 'VALID_SIGNAL_1', geometryIds: [ 'field', 'pixelated' ], }, { layerId: 'MY_LAYER_2', validSignalTypeId: 'VALID_SIGNAL_2', geometryIds: [ 'field' ], }, ]} ``` ### Geometries API in the timelapse API component The `geometries` prop contains an array of objects. Every object in the array contains properties described in the table below. | Property | Type | Description | | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `geometry`\* | `object` | Geometry to be displayed in the timelapse component. See [Geometry](https://docs.planet.com/data/area-monitoring/common.md#geometry) for more details. | | `style`\* | `object` | Style in which geometry is to be displayed in the timelapse component. See [Style](https://docs.planet.com/data/area-monitoring/common.md#style) for more details. | | `id`\* | `string` | Geometry ID. Allows the user to show/hide geometries. Note that the shown IDs are saved globally, so if another component is mounted with a different set of geometry `id`s, they will be hidden (until selected through settings). | | `label`\* | `string` | Geometry label. | *\* indicates mandatory properties* **Example** `geometries`: ``` geometries={[ { geometry: { type: 'MultiPolygon', coordinates: [ [ [ [11.02, 45.01], [11.02, 45.02], [11.03, 45.02], [11.03, 45.01], [11.02, 45.01], ], ], ], }, style: { strokeColor: 'white', lineWidth: 2, }, id: "field", label: "Field", }, ... ]} ```