Add multi-source cog example

examples/cog-math-multisource.html

@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: NDVI+NDWI from two 16-bit COGs
+shortdesc: Calculating NDVI+NDWI as green and blue values.
+docs: >
+  The GeoTIFF layer in this example calculates the Normalized Difference Vegetation Index (NDVI)
+  and Normalized Difference Water Index (NDWI) from two cloud-optimized Sentinel 2 GeoTIFFs: one
+  with 10 m resolution and red and a near infrared bands, and one with 60 m resolution and a short
+  wave infrared channel. The NDVI is shown as green, the NDWI as blue.
+tags: "cog, ndvi, ndwi, sentinel, geotiff"
+---
+<div id="map" class="map"></div>

examples/cog-math-multisource.js

@@ -0,0 +1,64 @@
+import GeoTIFF from '../src/ol/source/GeoTIFF.js';
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+import View from '../src/ol/View.js';
+
+const source = new GeoTIFF({
+  sources: [
+    {
+      url: 'https://s2downloads.eox.at/demo/Sentinel-2/3857/R10m.tif',
+      samples: [2],
+      max: 65535,
+    },
+    {
+      url: 'https://s2downloads.eox.at/demo/Sentinel-2/3857/R10m.tif',
+      samples: [3],
+      max: 65535,
+    },
+    {
+      url: 'https://s2downloads.eox.at/demo/Sentinel-2/3857/R60m.tif',
+      samples: [8],
+      max: 65535,
+    },
+  ],
+});
+source.setAttributions(
+  "<a href='https://s2maps.eu'>Sentinel-2 cloudless</a> by <a href='https://eox.at/'>EOX IT Services GmbH</a> (Contains modified Copernicus Sentinel data 2019)"
+);
+
+const ndvi = [
+  '/',
+  ['-', ['band', 2], ['band', 1]],
+  ['+', ['band', 2], ['band', 1]],
+];
+
+const ndwi = [
+  '/',
+  ['-', ['band', 3], ['band', 1]],
+  ['+', ['band', 3], ['band', 1]],
+];
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      style: {
+        color: [
+          'color',
+          // red: | NDVI - NDWI |
+          ['*', 255, ['abs', ['-', ndvi, ndwi]]],
+          // green: NDVI
+          ['*', 255, ndvi],
+          // blue: NDWI
+          ['*', 255, ndwi],
+        ],
+      },
+      source,
+    }),
+  ],
+  view: new View({
+    center: [1900000, 6100000],
+    zoom: 15,
+    minZoom: 10,
+  }),
+});