Nicer example

examples/raster.html

@@ -3,7 +3,21 @@ template: example.html
 title: Raster Source
 shortdesc: Demonstrates pixelwise operations with a raster source.
 docs: >
-  A dynamically generated raster source.
+  <p>
+    This example uses a <code>ol.source.Raster</code> to generate data
+    based on another source.  The raster source accepts any number of
+    input sources (tile or image based) and runs a pipeline of
+    operations on the input pixels.  The return from the final
+    operation is used as the data for the output source.
+  </p>
+  <p>
+    In this case, a single tiled source of imagery is used as input.
+    For each pixel, the Triangular Greenness Index
+    (<a href="http://digitalcommons.unl.edu/cgi/viewcontent.cgi?article=2161&context=usdaarsfacpub">TGI</a>)
+    is calculated from the input pixels.  A second operation colors
+    those pixels based on a threshold value (values above the
+    threshold are green and those below are transparent).
+  </p>
 tags: "raster, pixel"
 ---
 <div class="row-fluid">

examples/raster.js

@@ -1,28 +1,58 @@
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.layer.Image');
-goog.require('ol.source.OSM');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.BingMaps');
 goog.require('ol.source.Raster');
 
+function tgi(pixels) {
+  var pixel = pixels[0];
+  var r = pixel[0] / 255;
+  var g = pixel[1] / 255;
+  var b = pixel[2] / 255;
+  var index = (120 * (r - b) - (190 * (r - g))) / 2;
+  pixel[0] = index;
+  return pixels;
+}
 
-var map = new ol.Map({
+var threshold = 10;
-  layers: [
+
-    new ol.layer.Image({
+function color(pixels) {
-      source: new ol.source.Raster({
+  var pixel = pixels[0];
-        sources: [new ol.source.OSM()],
+  var index = pixel[0];
-        operations: [function(pixels) {
+  if (index > threshold) {
-          var pixel = pixels[0];
+    pixel[0] = 0;
-          var b = pixel[2];
+    pixel[1] = 255;
-          pixel[2] = pixel[0];
+    pixel[2] = 0;
-          pixel[0] = b;
+    pixel[3] = 255;
-          return pixels;
+  } else {
-        }]
+    pixel[3] = 0;
-      })
+  }
-    })
+  return pixels;
-  ],
+}
-  target: 'map',
+
-  view: new ol.View({
+var bing = new ol.source.BingMaps({
-    center: [0, 0],
+  key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
-    zoom: 2
+  imagerySet: 'Aerial'
+});
+
+var imagery = new ol.layer.Tile({
+  source: bing
+});
+
+var greenness = new ol.layer.Image({
+  source: new ol.source.Raster({
+    sources: [bing],
+    operations: [tgi, color]
+  })
+});
+
+var map = new ol.Map({
+  layers: [imagery, greenness],
+  target: 'map',
+  view: new ol.View({
+    center: [-9651695.964309687, 4937351.719788862],
+    zoom: 13,
+    minZoom: 12
   })
 });