title: OpenLayers: Creating NDVI raster from TileImage source
body: <p>I'm trying to recreate part of the example given at <a href="https://openlayers.org/en/v4.6.5/examples/raster.html" rel="nofollow noreferrer">https://openlayers.org/en/v4.6.5/examples/raster.html</a>, with a few adjustments: </p>
  
  <ul>
  <li>I'm using a TileImage source rather than the Bing Maps Aerial layer</li>
  <li>I'm calculating NDVI rather than VGI</li>
  <li>I want to display NDVI as a greyscale map where values of 0 are black and values of 1 are white</li>
  <li>I don't need to calculate or display stats in a chart</li>
  </ul>
  
  <p>Here are the relevant parts of my code:</p>
  
  <pre><code>function ndvi(pixel) {
    var n = pixel[0] / 255;
    var r = pixel[1] / 255;
    var g = pixel[2] / 255;
    return (n - r) / (n + r);
  }
  
  window["L8SourceNRG"] = new ol.source.TileImage({
    url: NRGtileURL,
    crossOrigin: 'anonymous',
    transition: 0,
    tileGrid: ol.tilegrid.createXYZ({maxZoom : maxZoomLevel})
  });
  
  window["L8SourceNDVI2"] = new ol.source.Raster({
    sources: [window["L8SourceNRG"]],
    operation: function(pixels, data) {
      var pixel = pixels[0];
      var value = ndvi(pixel);
      if (value &gt; 0) {
        pixel[0] = value * 255;
        pixel[1] = value * 255;
        pixel[2] = value * 255;
        pixel[3] = 128;
      } else {
        pixel[3] = 0;
      }
      return pixel;
    },
    lib: {
      ndvi: ndvi
    }
  });
  
  window['L8NDVI2Layer'] = new ol.layer.Tile({ source:window["L8SourceNDVI2"], visible: false });
  
  window['L8NDVI2Layer'].set('visible', true);
  </code></pre>
  
  <p>When OpenLayers attempts to render the layer, I get the following fairly unhelpful error message:</p>
  
  <pre><code>Uncaught TypeError: l.eb is not a function
  </code></pre>
  
  <p>I have tried running the script using ol-debug.js rather than ol.js, in which case I get the following:</p>
  
  <pre><code>ol-debug.js:78547 Uncaught TypeError: Cannot read property 'Processor' of undefined
      at ol.source.Raster.setOperation (ol-debug.js:78547)
      at new ol.source.Raster (ol-debug.js:78532)
      at Object.&lt;anonymous&gt; (map-nav.js:328)
      at Object.&lt;anonymous&gt; (VM23112 jquery.min.js:2)
      at j (VM23112 jquery.min.js:2)
      at Object.fireWith [as resolveWith] (VM23112 jquery.min.js:2)
      at Object.&lt;anonymous&gt; (VM23112 jquery.min.js:2)
      at j (VM23112 jquery.min.js:2)
      at Object.fireWith [as resolveWith] (VM23112 jquery.min.js:2)
      at x (VM23112 jquery.min.js:4)
  </code></pre>
  
  <p>Line 328 of map-nav.js, as mentioned in the above error, corresponds with the following line of the first block of code provided above:</p>
  
  <pre><code>sources: [window["L8SourceNRG"]],
  </code></pre>
  
  <p>From reading elsewhere, I believe the above error is an unresolved pixelworks dependency issue which only affects ol-debug.js and not ol.js, and unfortunately means I can't use ol-debug.js, although I may be wrong on this.</p>
  
  <p>I am certain that my TileImage source is OK, as I can use it in other layers. I can only conclude that there is some extra step required when using a TileImage source to create a raster source which isn't required when using a Bing Maps tile source to create a raster source. Would really appreciate any clues here.</p>
  
  <p>EDIT: Added code to show how the source L8SourceNDVI2 is loaded into a 'L8NDVI2Layer' layer, which is initially not visible, but then set to visible. Neither of these lines throw any errors, and I'm not running any code after those lines are executed - the error seems to be coming from some process that happens within OL after that point, perhaps to do with rendering the layer or refreshing the map?</p>
  
  <p>EDIT 2: I've noticed that if I change L8SourceNDVI2 to a new ol.source.TileImage rather than a Raster, the error doesn't fire, but the layer doesn't show on the map at all. Not sure what this means.</p>