Vizzuality/gfw-climate

View on GitHub
app/assets/javascripts/map/views/layers/Forest2000Layer.js

Summary

Maintainability
A
1 hr
Test Coverage
/**
 * The Forest2000 layer module for use on canvas.
 *
 * @return ForestLayer class (extends CanvasLayerClass)
 */
define(
  [
    'd3',
    'uri',
    'abstract/layer/CanvasLayerClass',
    'map/presenters/layers/Forest2000LayerPresenter'
  ],
  function(d3, UriTemplate, CanvasLayerClass, Presenter) {
    'use strict';

    var Forest2000Layer = CanvasLayerClass.extend({
      options: {
        threshold: 30,
        dataMaxZoom: 12,
        urlTemplate:
          'http://earthengine.google.org/static/hansen_2014/gfw_loss_tree_year_{threshold}_2014{/z}{/x}{/y}.png'
      },

      init: function(layer, options, map) {
        this.presenter = new Presenter(this);
        this._super(layer, options, map);
        this.threshold = options.threshold || this.options.threshold;
      },

      /**
       * Filters the canvas imgdata.
       * @override
       */
      filterCanvasImgdata: function(imgdata, w, h) {
        var components = 4;
        var zoom = this.map.getZoom();
        var exp = zoom < 11 ? 0.3 + (zoom - 3) / 20 : 1;

        var myscale = d3.scale
          .pow()
          .exponent(exp)
          .domain([0, 256])
          .range([0, 256]);

        for (var i = 0; i < w; ++i) {
          for (var j = 0; j < h; ++j) {
            var pixelPos = (j * w + i) * components;
            var intensity = imgdata[pixelPos + 1];

            imgdata[pixelPos] = 151;
            imgdata[pixelPos + 1] = 189;
            imgdata[pixelPos + 2] = 61;

            // apply intensity-dependent saturation on R & B channels
            //imgdata[pixelPos ] = (72 - zoom) + 151 - (3 * myscale(intensity) / zoom);
            //imgdata[pixelPos + 2] = (33 - zoom) + 61 - ((intensity) / zoom);

            // if (zoom < 13) {
            //   imgdata[pixelPos+ 3] = intensity*0.8;
            // } else {
            //   imgdata[pixelPos+ 3] = intensity*0.8;
            // }

            imgdata[pixelPos + 3] =
              zoom < 13 ? myscale(intensity) * 0.8 : intensity * 0.8;
          }
        }
      },

      setThreshold: function(threshold) {
        this.threshold = threshold;
        this.presenter.updateLayer();
      },

      _getUrl: function(x, y, z) {
        return new UriTemplate(this.options.urlTemplate).fillFromObject({
          x: x,
          y: y,
          z: z,
          threshold: this.threshold
        });
      }
    });

    return Forest2000Layer;
  }
);