Sentinel Hub

A tile source using the Sentinel Hub Processing API

This example renders a tile layer with a source that uses the Sentinel Hub Processing API to generate tiles. The Processing API requires an access token. The form above can be used to provide an OAuth client id and secret. The default client id and secret used in this example is severely rate limited. For the example to perform well, you should register for your own client id and secret. With this information, the source will fetch an access token. If an accesss token is fetched by other means, the source.setAuth() method can be called the token directly. See the Sentinel Hub authentication documentation for details.

See these other examples for details on the following:

Sentinel Hub Date Picker — calling source.setData() to update the time range for the input data.
Sentinel Hub Custom Script — calling source.setEvalscript() to update the Evalscript used in rendering tiles.

main.js

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import {useGeographic} from 'ol/proj.js';
import SentinelHub from 'ol/source/SentinelHub.js';

useGeographic();

const source = new SentinelHub({
  data: [
    {
      type: 'sentinel-2-l2a',
      dataFilter: {
        timeRange: {
          from: '2024-05-30T00:00:00Z',
          to: '2024-06-01T00:00:00Z',
        },
      },
    },
  ],
  evalscript: {
    setup: () => ({
      input: ['B12', 'B08', 'B04'],
      output: {bands: 3},
    }),
    evaluatePixel: (sample) => [
      2.5 * sample.B12,
      2 * sample.B08,
      2 * sample.B04,
    ],
  },
});

const map = new Map({
  layers: [new TileLayer({source})],
  target: 'map',
  view: new View({
    center: [-121.75, 46.85],
    zoom: 10,
    minZoom: 7,
    maxZoom: 13,
  }),
});

document.getElementById('auth-form').addEventListener('submit', (event) => {
  const clientId = event.target.elements['id'].value;
  const clientSecret = event.target.elements['secret'].value;
  source.setAuth({clientId, clientSecret});
});

source.on('change', () => {
  if (source.getState() === 'error') {
    alert(source.getError());
  }
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Sentinel Hub</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
      dialog {
        top: 13rem;
      }

      #auth-form {
        display: flex;
        flex-direction: column;
      }

      #auth-form > label {
        margin-bottom: 1rem;
      }

      #auth-form > input[type=submit] {
        margin-top: 1rem;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <dialog id="auth-dialog" open>
      <form method="dialog" id="auth-form">
        <label>Client id
          <br>
          <input type="text" name="id" autofocus value="fa02a066-fc80-4cb4-af26-aae0af26cbf1">
        </label>
        <label>Client secret
          <br>
          <input type="password" name="secret" value="rate_limit_secret">
        </label>
        <input type="submit" value="show map">
      </form>
    </dialog>

    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "sentinel-hub",
  "dependencies": {
    "ol": "10.5.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}