From 79b3bc42447ce0b27e367122774c7b3fb3d47bd7 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Wed, 4 Aug 2021 00:07:31 +0200
Subject: [PATCH] Add multi-source cog example

---
 examples/cog-math-multisource.html | 12 ++++++
 examples/cog-math-multisource.js   | 64 ++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 examples/cog-math-multisource.html
 create mode 100644 examples/cog-math-multisource.js

diff --git a/examples/cog-math-multisource.html b/examples/cog-math-multisource.html
new file mode 100644
index 0000000000..08e09a0105
--- /dev/null
+++ b/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>
diff --git a/examples/cog-math-multisource.js b/examples/cog-math-multisource.js
new file mode 100644
index 0000000000..e585b24305
--- /dev/null
+++ b/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,
+  }),
+});