Merge pull request #12806 from tschaub/simpler-sea-level

Update to the WebGL sea level example

examples/webgl-sea-level.html

@@ -11,7 +11,7 @@ docs: >
     values ranging from 0 to 1.  The <code>band</code> operator is used to select normalized values
     from a single band.
   </p><p>
-    After converting the normalized RGB values to elevation, the <code>interpolate</code> expression
+    After converting the normalized RGB values to elevation, the <code>case</code> expression
     is used to pick colors to apply at a given elevation.  Instead of using constant
     numeric values as the stops in the colors array, the <code>var</code> operator allows you to
     use a value that can be modified by your application.  When the user drags the

examples/webgl-sea-level.js

@@ -9,7 +9,24 @@ const attributions =
   '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
-const elevation = new TileLayer({
+// band math operates on normalized values from 0-1
+// so we scale by 255 to align with the elevation formula
+// from https://cloud.maptiler.com/tiles/terrain-rgb/
+const elevation = [
+  '+',
+  -10000,
+  [
+    '*',
+    0.1 * 255,
+    [
+      '+',
+      ['*', 256 * 256, ['band', 1]],
+      ['+', ['*', 256, ['band', 2]], ['band', 3]],
+    ],
+  ],
+];
+
+const layer = new TileLayer({
   opacity: 0.6,
   source: new XYZ({
     url:
@@ -23,28 +40,10 @@ const elevation = new TileLayer({
       level: 0,
     },
     color: [
-      'interpolate',
+      'case',
-      ['linear'],
+      // use the `level` style variable to determine the color
-      // band math operates on normalized values from 0-1
+      ['<=', elevation, ['var', 'level']],
-      // so we scale by 255 to align with the elevation formula
-      // from https://cloud.maptiler.com/tiles/terrain-rgb/
-      [
-        '+',
-        -10000,
-        [
-          '*',
-          0.1 * 255,
-          [
-            '+',
-            ['*', 256 * 256, ['band', 1]],
-            ['+', ['*', 256, ['band', 2]], ['band', 3]],
-          ],
-        ],
-      ],
-      // use the `level` style variable as a stop in the color ramp
-      ['var', 'level'],
       [139, 212, 255, 1],
-      ['+', 0.01, ['var', 'level']],
       [139, 212, 255, 0],
     ],
   },
@@ -61,7 +60,7 @@ const map = new Map({
         tileSize: 512,
       }),
     }),
-    elevation,
+    layer,
   ],
   view: new View({
     center: fromLonLat([-122.3267, 37.8377]),
@@ -73,7 +72,7 @@ const control = document.getElementById('level');
 const output = document.getElementById('output');
 const listener = function () {
   output.innerText = control.value;
-  elevation.updateStyleVariables({level: parseFloat(control.value)});
+  layer.updateStyleVariables({level: parseFloat(control.value)});
 };
 control.addEventListener('input', listener);
 control.addEventListener('change', listener);