From 07ebc48516a4573fd43c8860d944405afecf75c7 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Sat, 8 Jan 2022 13:28:01 +0000
Subject: [PATCH] Replace imageSmoothingEnabled  with interpolate

---
 examples/sea-level.html |  5 -----
 examples/sea-level.js   | 20 ++++++++------------
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/examples/sea-level.html b/examples/sea-level.html
index ec30c85ba2..b425065813 100644
--- a/examples/sea-level.html
+++ b/examples/sea-level.html
@@ -8,11 +8,6 @@ docs: >
     <a href="https://blog.mapbox.com/styling-mapbox-terrain-rgb-c75d1cd71471">Mapbox Terrain-RGB tiles</a>
     to "flood" areas below the elevation shown on the sea level slider.
   </p>
-  <p>
-    <code>ol/source/Raster</code> can take either a tile source or layer.
-    In this case a layer is used to allow disabling at the <code>prerender</code> event
-    of image smoothing which would change the precise elevation values set in the pixels.
-  </p>
 tags: "raster, pixel operation, flood"
 cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB
diff --git a/examples/sea-level.js b/examples/sea-level.js
index 741107883c..ab4ae604ce 100644
--- a/examples/sea-level.js
+++ b/examples/sea-level.js
@@ -26,18 +26,14 @@ 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({
-  source: new XYZ({
-    url:
-      'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
-    tileSize: 512,
-    maxZoom: 12,
-    crossOrigin: '',
-  }),
-});
-elevation.on('prerender', function (evt) {
-  evt.context.imageSmoothingEnabled = false;
-  evt.context.msImageSmoothingEnabled = false;
+const elevation = new XYZ({
+  // The RGB values in the source collectively represent elevation.
+  // Interpolation of individual colors would produce incorrect evelations and is disabled.
+  url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
+  tileSize: 512,
+  maxZoom: 12,
+  crossOrigin: '',
+  interpolate: false,
 });
 
 const raster = new RasterSource({