WMTS Tile Transitions

This example uses OpenLayers v4.0.1. The latest is v.

#### WMTS Tile Transitions

Sea-level

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

Demonstrates smooth reloading of layers when changing a dimension continously. 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.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.extent
,
- ol.layer.Tile
,
- ol.proj
,
- ol.source.OSM
,
- ol.source.WMTS
,
- ol.tilegrid.WMTS

Copy Edit
WMTS Tile Transitions Example of smooth tile transitions when changing the dimension of a WMTS layer. // 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); }); <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>

    <!DOCTYPE html>
    <html>
      <head>
        <title>WMTS Tile Transitions</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/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.0.1/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>