WMTS Tile Transitions

Example of smooth tile transitions when changing the dimension of a WMTS layer.

Demonstrates smooth reloading of layers when changing a dimension continuously. The demonstration layer is a global sea-level computation (flooding computation from SCALGO, underlying data from CGIAR-CSI SRTM) where cells that are flooded if the sea-level rises to more than x m are colored blue. The user selects the sea-level dimension using a slider.

<!DOCTYPE html>
<html>
  <head>
    <title>WMTS Tile Transitions</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <label>
      Sea-level
      <input id="slider" type="range" value="10" max="100" min="-1">
    </label>
    <span id="theinfo"></span>
    <script>
      // create the WMTS tile grid in the google projection
      var projection = ol.proj.get('EPSG:3857');
      var tileSizePixels = 256;
      var tileSizeMtrs = ol.extent.getWidth(projection.getExtent()) / tileSizePixels;
      var matrixIds = [];
      var resolutions = [];
      for (var i = 0; i <= 14; i++) {
        matrixIds[i] = i;
        resolutions[i] = tileSizeMtrs / Math.pow(2, i);
      }
      var tileGrid = new ol.tilegrid.WMTS({
        origin: ol.extent.getTopLeft(projection.getExtent()),
        resolutions: resolutions,
        matrixIds: matrixIds
      });

      var scalgoToken = 'CC5BF28A7D96B320C7DFBFD1236B5BEB';

      var wmtsSource = new ol.source.WMTS({
        url: 'http://ts2.scalgo.com/olpatch/wmts?token=' + scalgoToken,
        layer: 'SRTM_4_1:SRTM_4_1_flooded_sealevels',
        format: 'image/png',
        matrixSet: 'EPSG:3857',
        attributions: [
          '<a href="http://scalgo.com">SCALGO</a>',
          '<a href="http://www.cgiar-csi.org/data/' +
              'srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>'
        ],
        tileGrid: tileGrid,
        style: 'default',
        dimensions: {
          'threshold': 100
        }
      });

      var map = new ol.Map({
        target: 'map',
        view: new ol.View({
          projection: projection,
          center: [-9871995, 3566245],
          zoom: 6
        }),
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          new ol.layer.Tile({
            opacity: 0.5,
            source: wmtsSource
          })
        ]
      });

      var updateSourceDimension = function(source, sliderVal) {
        source.updateDimensions({'threshold': sliderVal});
        document.getElementById('theinfo').innerHTML = sliderVal + ' meters';
      };

      updateSourceDimension(wmtsSource, 10);

      document.getElementById('slider').addEventListener('input', function() {
        updateSourceDimension(wmtsSource, this.value);
      });
    </script>
  </body>
</html>