This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Sentinel Hub Custom Script

SentinelHub 3 process 3 Evalscript 1

#####

Client id
Client secret

Updating the Evalscript used by the Sentinel Hub source.

This example demonstrates how a custom script can be used to render tiles from Sentinel Hub. Edit the `setup()` and `evaluatePixel()` functions above and click the update button to change the visualization. See the Sentinel Hub documentation on Evalscript for more information. See the basic Sentinel Hub example for details on authentication.

##### main.js

    import {javascript} from '@codemirror/lang-javascript';
    import {EditorView, basicSetup} from 'codemirror';
    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-15T00:00:00Z',
              to: '2024-05-25T00:00:00Z',
            },
          },
        },
      ],
    });

    const map = new Map({
      layers: [new TileLayer({source})],
      target: 'map',
      view: new View({
        center: [30.674, 29.935],
        zoom: 10,
        minZoom: 13,
        maxZoom: 15,
      }),
    });

    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 script = `//VERSION=3
    function setup() {
      return {
        input: ['B02', 'B03', 'B04', 'B08', 'B11'],
        output: {bands: 3},
      };
    }

    function evaluatePixel(sample) {
      // Normalized Difference Moisture Index
      const ndmi = (sample.B08 - sample.B11) / (sample.B08 + sample.B11);
      if (ndmi <= 0) {
        return [3 * sample.B04, 3 * sample.B03, 3 * sample.B02];
      }
      if (ndmi <= 0.2) {
        return [0, 0.8, 0.9];
      }
      if (ndmi <= 0.4) {
        return [0, 0.5, 0.9];
      }
      return [0, 0, 0.7];
    }`;

    const editor = new EditorView({
      doc: script,
      extensions: [basicSetup, javascript()],
      parent: document.getElementById('evalscript'),
    });

    document
      .getElementById('evalscript-form')
      .addEventListener('submit', (event) => {
        event.preventDefault();
        source.setEvalscript(editor.state.doc.toString());
      });

    source.setEvalscript(script);

    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 Custom Script</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;
          }

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

          #evalscript-form>input[type=submit] {
            margin-top: 1rem;
            width: fit-content;
            align-self: flex-end;
          }

          .cm-editor {
            font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
            font-size: 13px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>
        <form id="evalscript-form">
          <div id="evalscript"></div>
          <input type="submit" value="update">
        </form>
        <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>

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

##### package.json

    {
      "name": "sentinel-hub-custom-script",
      "dependencies": {
        "ol": "10.9.0",
        "@codemirror/lang-javascript": "^6.2.2",
        "codemirror": "^6.0.1"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }