Sentinel Hub Date Picker

Show imagery from the week before

Updating a Sentinel Hub source with new input data.

This example renders tiles from Sentinel Hub based on imagery in a user-selected date range. Changing the date picker above calls source.setData() with an updated time range in the data filter. See the basic Sentinel Hub example for details on authentication.

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({
  evalscript: {
    setup: () => ({
      input: ['B02', 'B03', 'B04'],
      output: {bands: 3},
    }),
    evaluatePixel: (sample) => [3 * sample.B04, 3 * sample.B03, 3 * sample.B02],
  },
});

const map = new Map({
  layers: [new TileLayer({source})],
  target: 'map',
  view: new View({
    center: [-108.6, 43.185],
    zoom: 12,
    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});
});

const picker = document.getElementById('to-date');

function updateInputData() {
  const toDate = new Date(picker.value);
  const fromDate = new Date(toDate.getTime());
  fromDate.setDate(fromDate.getDate() - 7);

  source.setData([
    {
      type: 'sentinel-2-l2a',
      dataFilter: {
        timeRange: {
          from: fromDate.toISOString(),
          to: toDate.toISOString(),
        },
      },
    },
  ]);
}

picker.addEventListener('change', () => updateInputData());
updateInputData();

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 Date Picker</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>
        </label>
        <label>Client secret
          <br>
          <input type="password" name="secret">
        </label>
        <input type="submit" value="show map">
      </form>
    </dialog>
    <label>
      Show imagery from the week before&nbsp;
      <input type="date" id="to-date" value="2024-06-01">
    </label>

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

package.json

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