Adjustments to NumpyTiles example

examples/numpytile.css

@@ -0,0 +1,3 @@
+input[type="range"] {
+  vertical-align: text-bottom;
+}

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>

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,10 +44,14 @@ const interpolateBand = (bandIdx) => [
   ['var', 'bMin'],
   0,
   ['var', 'bMax'],
-  1.0,
+  1,
 ];
 
-const createNumpyStyle = (bandMin, bandMax) => ({
+const initialMin = 3000;
+const initialMax = 18000;
+
+const numpyLayer = new TileLayer({
+  style: {
     color: [
       'array',
       interpolateBand(3),
@@ -57,13 +60,10 @@ const createNumpyStyle = (bandMin, bandMax) => ({
       ['band', 5],
     ],
     variables: {
-    'bMin': bandMin,
-    'bMax': bandMax,
+      'bMin': initialMin,
+      'bMax': initialMax,
+    },
   },
-});
-
-const numpyLayer = new TileLayer({
-  style: createNumpyStyle(3000, 18000),
   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) => {
+inputMin.addEventListener('input', (evt) => {
   numpyLayer.updateStyleVariables({
     'bMin': parseFloat(evt.target.value),
-      'bMax': parseFloat(colorCeil.value),
+    'bMax': parseFloat(inputMax.value),
   });
+  outputMin.innerText = evt.target.value;
 });
 
-  colorCeil.addEventListener('input', (evt) => {
+inputMax.addEventListener('input', (evt) => {
   numpyLayer.updateStyleVariables({
-      'bMin': parseFloat(colorFloor.value),
+    'bMin': parseFloat(inputMin.value),
     'bMax': parseFloat(evt.target.value),
   });
+  outputMax.innerText = evt.target.value;
 });
-};
-configureInputs();
+
+inputMin.value = initialMin;
+inputMax.value = initialMax;
+outputMin.innerText = initialMin;
+outputMax.innerText = initialMax;