---
layout: example.html
title: Disable Image Smoothing
shortdesc: Example of disabling image smoothing
docs: >
  Example of disabling image smoothing when using raster DEM (digital elevation model) data.
  The <b>imageSmoothingEnabled</b> (or for Internet Explorer <b>msImageSmoothingEnabled</b>) canvas
  context property is set to false at the layer's <b>prerender</b> event. Additionally for a
  reprojected source those properties must also be also be specified for the canvas contexts used in
  the reprojection via the source's <b>reprojectionContextOptions</b> option. Elevation data is
  calculated from the pixel value returned by <b>forEachLayerAtPixel<b>. For comparison a second map
  with smoothing enabled returns inaccuate elevations which are very noticeable close to 3107 meters
  due to how elevation is calculated from the pixel value.
tags: "disable image smoothing, xyz, maptiler, reprojection"
cloak:
  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
    value: Get your own API key at https://www.maptiler.com/cloud/
---
<div class="wrapper">
  <div class="half">
    <h4>Smoothing Disabled</h4>
    <div id="map1" class="map"></div>
    <div>
      <label>
        Elevation
        <span id="info1">0.0</span> meters
      </label>
    </div>
    <div>
      <label>
        Imagery opacity
        <input id="opacity" type="range" min="0" max="100" value="80" />
        <span id="output"></span> %
      </label>
    </div>
  </div>
  <div class="half">
    <h4>Uncorrected Comparison</h4>
    <div id="map2" class="map"></div>
    <div>
      <label>
        Elevation
        <span id="info2">0.0</span> meters
      </label>
    </div>
  </div>
</div>