Add an wmts-dimensions example

examples/wmts-dimensions.html

@@ -0,0 +1,18 @@
+---
+layout: example.html
+title: Smooth WMTS tile transition example
+shortdesc: Example of smooth tile transitions when changing the dimension of a WMTS layer.
+docs: >
+  Demonstrates smooth reloading of layers when changing a dimension continously. The demonstration layer is a global sea-level computation (flooding computation from <a href="http://scalgo.com">SCALGO</a>, underlying data from <a href="http://www.cgiar-csi.org/data/srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>) where cells that are flooded if the sea-level rises to more than <em>x</em> m are colored blue. The user selects the sea-level dimension using a slider.
+tags: "wmts, parameter, transition"
+---
+<div class="row-fluid">
+  <div class="span6">
+    <div id="map" class="map"></div>
+  </div>
+  <div class="span6 offset3">
+    Sea-level:
+    <input id="slider" type="range" value="10" step="0.25" max="100" min="-1" />
+    <span id="theinfo"></span>
+  </div>
+</div>

examples/wmts-dimensions.js

@@ -0,0 +1,85 @@
+goog.require('ol.Attribution');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.control');
+goog.require('ol.control.Attribution');
+goog.require('ol.control.Zoom');
+goog.require('ol.extent');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.OSM');
+goog.require('ol.source.WMTS');
+goog.require('ol.tilegrid.WMTS');
+
+
+// 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/global/wmts?token=' + scalgoToken,
+  layer: 'hydrosheds:sea-levels',
+  format: 'image/png',
+  matrixSet: 'EPSG:3857',
+  attributions: [
+    new ol.Attribution({
+      html: '<a href="http://scalgo.com">SCALGO</a>'
+    }),
+    new ol.Attribution({
+      html: '<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: [-3052589, 3541786],
+    zoom: 3
+  }),
+  controls: [
+    new ol.control.Zoom(),
+    new ol.control.Attribution()
+  ],
+  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);
+});