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.

Example timelapse

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

Timelapse component control elements

Timelapse API

Usage

<Timelapse
baseUrl="https://services.sentinel-hub.com/ogc/wms/<your-instance-id>"
layers={[
{ layerId: 'MY_LAYER_1', validSignalTypeId: 'VALID_SIGNAL_1', geometryIds: [ 'field', 'pixelated' ] },
{ layerId: 'MY_LAYER_2', validSignalTypeId: 'VALID_SIGNAL_2', geometryIds: [ 'field' ] },
]}
shAuthToken={shAuthToken}
amServicesAuthToken={AMServicesAuthToken}
signalServiceUrl="https://am-test.sinergise.com/signal/"
scope="SI19"
foiId="SI19.FOI.CROP_4106574"
useValidSignal={true}
defaultTimespan={{ from: '2019-01-01', to: '2019-03-31' }}
selectedDate={null}
onDateSelect={date => 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

The props of the Timelapse React component are described in the table below.

NameTypeDefaultDescription
baseUrl*stringContains an OGC WMS compatible base URL address (e.g. https://services.sentinel-hub.com/ogc/wms/<your-instance-id>). The address needs to support GetCapabilities call.
layers*arrayDefines layers that can be displayed. For more details see layers API in the timelapse API component.
geometries*arrayDefines geometries to be displayed. For more details see the 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, 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*stringThe (base) AM signal service URL at which the endpoints for signals are (e.g. https://am-test.sinergise.com/signal/).
scope*stringReference data differentiator (e.g. SI22). For more details see the scope.
foiId*stringFully qualified ID of a FOI (feature of interest; e.g DEMO.FOI.7025947001).
defaultTimespan*objectThe 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 format (e.g. { from: '2020-01-01', to: '2020-01-31' }).
widthnumber or string100%Width (e.g. 300) of the component (and thus images) in pixels.
heightnumber or string100%Height (e.g. 300) of the component (and thus images) in pixels.
paddingXPercentnumber or string10Percent of padding in the horizontal direction (e.g. 10).
paddingYPercentnumber or string10Percent of padding in the vertical direction (e.g. 10).
dateFormatstringDate format (e.g. 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.
upsamplingstringUpsampling interpolator for image chip. Available options: BILINEAR, BICUBIC, NEAREST
downsamplingstringDownsampling interpolator for image chip. Available options: BILINEAR, BICUBIC, NEAREST
selectedDatestring - compatible with ISO 8601 format (YYYY-MM-DD)Contains the UTC date (e.g. 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.
onDateSelectcallback ((value: string \| null) => void)Callback that receives a string or null value.
useValidSignalboolean (true/false)Indicator if all or only valid image chips should be displayed. For more details see useValidSignal.
autoplayboolean (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.
lazyLoadingboolean (true/false)If not present or if it's 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.
enableGifExportboolean (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.
gifFilenamestringIf provided, the exported GIF file will have that name (e.g. my_animation.gif). If not provided, the exported GIF file will be named timelapse.gif.
languagestringenThe selected language. Available options: sl - Slovenian, en - English, de - German
cacheDurationnumber or string300Cache duration in seconds (e.g. 500).

* indicates mandatory props

useValidSignal

If not present or if it's 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's 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.

PropertyTypeDescription
layerId*stringLayer ID. Must be available at the baseUrl specified (unknown layerId is silently ignored - not available for selection in the component drop-down list).
validSignalTypeIdstringValid 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).
geometryIdsarrayContain the same ids 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 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.

PropertyTypeDescription
geometry*objectGeometry to be displayed in the timelapse component. See Geometry for more details.
style*objectStyle in which geometry is to be displayed in the timelapse component. See Style for more details.
id*stringGeometry 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 ids, they will be hidden (until selected through settings).
label*stringGeometry 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",
},
...
]}