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.

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 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.

* 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.

* 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.

* 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",
  },
  ...
]}