From 0783a8211f407e797cb30e85c5bd8c9e09490f6f Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Thu, 16 Sep 2021 09:44:43 -0600
Subject: [PATCH] Adjustments to NumpyTiles example

---
 examples/numpytile.css  |  3 ++
 examples/numpytile.html | 20 ++++++-----
 examples/numpytile.js   | 75 +++++++++++++++++++++--------------------
 3 files changed, 52 insertions(+), 46 deletions(-)
 create mode 100644 examples/numpytile.css

diff --git a/examples/numpytile.css b/examples/numpytile.css
new file mode 100644
index 0000000000..a1b691a4c2
--- /dev/null
+++ b/examples/numpytile.css
@@ -0,0 +1,3 @@
+input[type="range"] {
+  vertical-align: text-bottom;
+}
diff --git a/examples/numpytile.html b/examples/numpytile.html
index 4869d7d849..964649c04a 100644
--- a/examples/numpytile.html
+++ b/examples/numpytile.html
@@ -1,20 +1,22 @@
 ---
 layout: example.html
 title: Rendering 16-bit NumpyTiles
-shortdesc: Renders a multi-byte depth source image directly using webGL.
+shortdesc: Renders a multi-byte depth source image directly using WebGL.
 docs: >
-  Use the NumpyTile format to render multibyte raster data.
-tags: "numpytiles"
+  This example uses a <code>ol/source/DataTile</code> source to load multi-byte raster data in the
+  <a href="https://github.com/planetlabs/numpytiles-spec/"></a>NumpyTile</a> format.
+  The source is rendered with a <code>ol/layer/WebGLTile</code> layer.  Adjusting the sliders above
+  performs a contrast stretch by adjusting the style variables set on the layer.
+tags: "numpytiles, webgl"
+resources:
+  - https://unpkg.com/@planet/ol-numpytiles@2.0.2/umd/NumpyLoader.js
 ---
 <div id="map" class="map"></div>
 
 <div>
-  <h5>Adjust colors</h5>
+  <h5>Contrast stretch</h5>
   <ul>
-    <li><b>Min:</b> <input type="range" min="1000" max="10000" id="color-floor"/></li>
-    <li><b>Max:</b> <input type="range" min="10000" max="50000" id="color-ceil"/></li>
+    <li>Min <input type="range" min="1000" max="10000" id="input-min"/> <span id="output-min"></span></li>
+    <li>Max <input type="range" min="10000" max="50000" id="input-max"/> <span id="output-max"></span></li>
   </ul>
-
 </div>
-
-<script type="text/javascript" src="https://unpkg.com/@planet/ol-numpytiles@2.0.2/umd/NumpyLoader.js"></script>
diff --git a/examples/numpytile.js b/examples/numpytile.js
index 92110bb78b..78df71634d 100644
--- a/examples/numpytile.js
+++ b/examples/numpytile.js
@@ -3,7 +3,6 @@ import TileLayer from '../src/ol/layer/WebGLTile.js';
 import View from '../src/ol/View.js';
 
 import DataTileSource from '../src/ol/source/DataTile.js';
-import OsmSource from '../src/ol/source/OSM.js';
 import {fromLonLat} from '../src/ol/proj.js';
 
 // 16-bit COG
@@ -45,25 +44,26 @@ const interpolateBand = (bandIdx) => [
   ['var', 'bMin'],
   0,
   ['var', 'bMax'],
-  1.0,
+  1,
 ];
 
-const createNumpyStyle = (bandMin, bandMax) => ({
-  color: [
-    'array',
-    interpolateBand(3),
-    interpolateBand(2),
-    interpolateBand(1),
-    ['band', 5],
-  ],
-  variables: {
-    'bMin': bandMin,
-    'bMax': bandMax,
-  },
-});
+const initialMin = 3000;
+const initialMax = 18000;
 
 const numpyLayer = new TileLayer({
-  style: createNumpyStyle(3000, 18000),
+  style: {
+    color: [
+      'array',
+      interpolateBand(3),
+      interpolateBand(2),
+      interpolateBand(1),
+      ['band', 5],
+    ],
+    variables: {
+      'bMin': initialMin,
+      'bMax': initialMax,
+    },
+  },
   source: new DataTileSource({
     loader: numpyTileLoader,
     bandCount: 5,
@@ -72,34 +72,35 @@ const numpyLayer = new TileLayer({
 
 const map = new Map({
   target: 'map',
-  layers: [
-    new TileLayer({
-      source: new OsmSource(),
-    }),
-    numpyLayer,
-  ],
+  layers: [numpyLayer],
   view: new View({
     center: fromLonLat([172.933, 1.3567]),
     zoom: 15,
   }),
 });
 
-const configureInputs = () => {
-  const colorFloor = document.getElementById('color-floor');
-  const colorCeil = document.getElementById('color-ceil');
+const inputMin = document.getElementById('input-min');
+const inputMax = document.getElementById('input-max');
+const outputMin = document.getElementById('output-min');
+const outputMax = document.getElementById('output-max');
 
-  colorFloor.addEventListener('input', (evt) => {
-    numpyLayer.updateStyleVariables({
-      'bMin': parseFloat(evt.target.value),
-      'bMax': parseFloat(colorCeil.value),
-    });
+inputMin.addEventListener('input', (evt) => {
+  numpyLayer.updateStyleVariables({
+    'bMin': parseFloat(evt.target.value),
+    'bMax': parseFloat(inputMax.value),
   });
+  outputMin.innerText = evt.target.value;
+});
 
-  colorCeil.addEventListener('input', (evt) => {
-    numpyLayer.updateStyleVariables({
-      'bMin': parseFloat(colorFloor.value),
-      'bMax': parseFloat(evt.target.value),
-    });
+inputMax.addEventListener('input', (evt) => {
+  numpyLayer.updateStyleVariables({
+    'bMin': parseFloat(inputMin.value),
+    'bMax': parseFloat(evt.target.value),
   });
-};
-configureInputs();
+  outputMax.innerText = evt.target.value;
+});
+
+inputMin.value = initialMin;
+inputMax.value = initialMax;
+outputMin.innerText = initialMin;
+outputMax.innerText = initialMax;