diff --git a/examples/sea-level.html b/examples/sea-level.html
index 4fa8001f35..6861d69fec 100644
--- a/examples/sea-level.html
+++ b/examples/sea-level.html
@@ -8,6 +8,11 @@ docs: >
     <a href="https://www.mapbox.com/blog/terrain-rgb/">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: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
diff --git a/examples/sea-level.js b/examples/sea-level.js
index bb8fb5b5ab..f52cdb0aad 100644
--- a/examples/sea-level.js
+++ b/examples/sea-level.js
@@ -22,9 +22,15 @@ function flood(pixels, data) {
 }
 
 const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
-const elevation = new XYZ({
-  url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
-  crossOrigin: 'anonymous'
+const elevation = new TileLayer({
+  source: new XYZ({
+    url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
+    crossOrigin: 'anonymous'
+  })
+});
+elevation.on('prerender', function(evt) {
+  evt.context.imageSmoothingEnabled = false;
+  evt.context.msImageSmoothingEnabled = false;
 });
 
 const raster = new RasterSource({