Add an example using Mapbox Terrain-RGB tiles

examples/sea-level.css

@@ -0,0 +1,9 @@
+#level {
+  display: inline-block;
+  width: 150px;
+  vertical-align: text-bottom;
+}
+
+a.location {
+  cursor: pointer;
+}

examples/sea-level.html

@@ -0,0 +1,26 @@
+---
+layout: example.html
+title: Sea Level
+shortdesc: Render sea level at different elevations
+docs: >
+  <p>
+    This example uses a <code>ol.source.Raster</code> with
+    <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>
+tags: "raster, pixel operation, flood"
+cloak:
+  pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg: Your Mapbox access token from http://mapbox.com/ here
+---
+<div id="map" class="map"></div>
+<label>
+  Sea level
+  <input id="level" type="range" min="0" max="100" value="1"/>
+  +<span id="output"></span> m
+</label>
+<br>
+Go to
+<a class="location" data-center="-122.3267,37.8377" data-zoom="11">San Francisco</a>,
+<a class="location" data-center="-73.9338,40.6861" data-zoom="11">New York</a>,
+<a class="location" data-center="72.9481,18.9929" data-zoom="11">Mumbai</a>, or
+<a class="location" data-center="120.831,31.160" data-zoom="9">Shanghai</a>

examples/sea-level.js

@@ -0,0 +1,78 @@
+// NOCOMPILE
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Image');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.Raster');
+goog.require('ol.source.XYZ');
+
+function flood(pixels, data) {
+  var pixel = pixels[0];
+  if (pixel[3]) {
+    var height = -10000 + ((pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1);
+    if (height <= data.level) {
+      pixel[0] = 145;
+      pixel[1] = 175;
+      pixel[2] = 186;
+      pixel[3] = 255;
+    } else {
+      pixel[3] = 0;
+    }
+  }
+  return pixel;
+}
+
+var key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
+var elevation = new ol.source.XYZ({
+  url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
+  crossOrigin: 'anonymous'
+});
+
+var raster = new ol.source.Raster({
+  sources: [elevation],
+  operation: flood
+});
+
+var map = new ol.Map({
+  target: 'map',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.XYZ({
+        url: 'https://api.mapbox.com/styles/v1/tschaub/ciutc102t00c62js5fqd47kqw/tiles/256/{z}/{x}/{y}?access_token=' + key
+      })
+    }),
+    new ol.layer.Image({
+      opacity: 0.6,
+      source: raster
+    })
+  ],
+  view: new ol.View({
+    center: ol.proj.fromLonLat([-122.3267, 37.8377]),
+    zoom: 11
+  })
+});
+
+var control = document.getElementById('level');
+var output = document.getElementById('output');
+control.addEventListener('input', function() {
+  output.innerText = control.value;
+  raster.changed();
+});
+output.innerText = control.value;
+
+raster.on('beforeoperations', function(event) {
+  event.data.level = control.value;
+});
+
+var locations = document.getElementsByClassName('location');
+for (var i = 0, ii = locations.length; i < ii; ++i) {
+  locations[i].addEventListener('click', relocate);
+}
+
+function relocate(event) {
+  var data = event.target.dataset;
+  var view = map.getView();
+  view.setCenter(ol.proj.fromLonLat(data.center.split(',').map(Number)));
+  view.setZoom(Number(data.zoom));
+}