Copy for LLM[View as Markdown](https://docs.planet.com/data/area-monitoring/visualizations/observation/)

# Observation

The Observation *React* component displays the satellite image chip with drawn shapes on top. It also re-fetches the image chip when the image chip is resized to the specified height and width.

![](/data/area-monitoring/visualizations/observation/observation_example.webp)

## Observation API

### Usage

```
<Observation

  baseUrl="https://services.sentinel-hub.com/ogc/wms/<your-instance-id>"

  layerId="MY_LAYER"

  date="2020-01-15"

  width={150}

  height={150}

  geometries={[

    {

      geometry: geoJSONGeometry1,

      style: {

        strokeColor: 'white',

        lineWidth: 1,

      },

    },

    {

      geometry: geoJSONGeometry2,

      style: {

        strokeColor: 'red',

        lineWidth: 1,

      },

    },

  ]}

  shAuthToken={shAuthToken}

  paddingXPercent={10}

  paddingYPercent={10}

  upsampling="BICUBIC"

  downsampling="BICUBIC"

  cacheDuration={300}

  onClick={() => console.log('CLICK!')}

  language="sl"

/>
```

### Component name

The component name `Observation` should be used when providing the *props*.

### Props

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

| Prop              | Type                    | Default | Description                                                                                                                                                                                                                           |
| ----------------- | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `baseUrl`\*       | `string`                |         | An OGC WMS compatible base URL address (for example, `https://services.sentinel-hub.com/ogc/wms/<your-instance-id>`). The address needs to support `GetCapabilities` call.                                                            |
| `layerId`\*       | `string`                |         | The layer unique identifier that must be available at the `baseUrl` specified.                                                                                                                                                        |
| `date`\*          | `string`                |         | The date used for the background image in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format (`YYYY-MM-DD`), in UTC. The date should be valid for the supplied layer ID.                                                       |
| `geometries`\*    | `array`                 |         | The shape type drawn on top of the satellite image, its position, outline color, and width.<br />For more details see [the geometries API in React observation API component](#geometries-api-in-react-observation-api-component).    |
| `shAuthToken`     | `string`                |         | The Sentinel Hub authentication token.<br />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. |
| `width`           | `number` or `string`    |         | The width (for example, `300`) of the component (and thus images) in pixels. If no value is present, it defaults to 100% of the width of the parent container.                                                                        |
| `height`          | `number` or `string`    |         | The height (for example, `300`) of the component (and thus images) in pixels. If no value is present, it defaults to 100% of the height of the parent container.                                                                      |
| `paddingXPercent` | `number`                | `10`    | The percent of padding in the horizontal direction.                                                                                                                                                                                   |
| `paddingYPercent` | `number`                | `10`    | The percent of padding in the vertical direction.                                                                                                                                                                                     |
| `upsampling`      | `string`                |         | The upsampling interpolator for the image chip.<br />Options are: `BILINEAR`, `BICUBIC`, `NEAREST`.                                                                                                                                   |
| `downsampling`    | `string`                |         | The downsampling interpolator for the image chip.<br />Options are: `BILINEAR`, `BICUBIC`, `NEAREST`.                                                                                                                                 |
| `onClick`         | callback `(() => void)` |         | When the image chip is clicked, the function given in the `onClick` prop is called.                                                                                                                                                   |
| `language`        | `string`                | `en`    | The selected language at the time of rendering.<br />Options are: `sl` - Slovenian, `en` - English, `de` - German.                                                                                                                    |
| `cacheDuration`   | `number` or `string`    | `300`   | The cache duration in seconds.                                                                                                                                                                                                        |

*\* indicates mandatory props*

### Geometries API in React observation 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 observation 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 observation component. See [Style](https://docs.planet.com/data/area-monitoring/common.md#style) for more details. |

**Example**:

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

    },

  },

]}
```