Merge pull request #557 from OpenGeoscience/canvas_heatmap

Canvas heatmap

examples/heatmap/example.json

@@ -0,0 +1,9 @@
+{
+ "path": "heatmap",
+ "title": "Heatmap Feature",
+ "exampleCss": ["main.css"],
+ "exampleJs": ["main.js"],
+ "about": {
+ "text": "This example shows how to add a heatmap to a map."
+ }
+}

examples/heatmap/index.jade

@@ -0,0 +1 @@
+extends ../common/templates/index.jade

examples/heatmap/main.js

@@ -0,0 +1,49 @@
+// Run after the DOM loads
+$(function () {
+ 'use strict';
+
+ var map = geo.map({
+ node: '#map',
+ center: {
+ x: -98,
+ y: 39
+ },
+ zoom: 3
+ });
+
+ $.ajax('https://s3.amazonaws.com/uploads.hipchat.com/446632/3114847/4dZfl0YfZpTfYzq/AdderallCities2015.csv', {
+ success: function (resp) {
+ var rows = resp.split(/\r\n|\n|\r/);
+ rows = rows.map( function (r) {
+ var fields = r.split(',');
+ return [fields[12], fields[24], fields[25]].map(parseFloat);
+ });
+ rows.splice(0, 1);
+
+ var layer = map.createLayer('feature', {renderer: 'canvas'});
+ var heatmap = layer.createFeature('heatmap')
+ .data(rows)
+ .intensity(function (d) {
+ return d[0];
+ })
+ .position(function (d) {
+ return {
+ x: d[2],
+ y: d[1]
+ };
+ })
+ .style('radius', 10)
+ .style('blurRadius', 30)
+ .style('opacity', 1.0)
+ .style('color',
+ {0: {r: 0, g: 0, b: 0, a: 0.0},
+ 0.25: {r: 0, g: 1, b: 0, a: 0.5},
+ 0.5: {r: 1, g: 1, b: 0, a: 0.8},
+ 1: {r: 1, g: 0, b: 0, a: 1.0}});
+ map.draw();
+ }
+ });
+
+ var base = map.createLayer('osm');
+ map.draw();
+});

sources.json

@@ -41,7 +41,8 @@
  "renderer.js",
  "osmLayer.js",
  "domRenderer.js",
- "choroplethFeature.js"
+ "choroplethFeature.js",
+ "heatmapFeature.js"
  ]
  },
  "geo.util": {
@@ -77,7 +78,8 @@
  "init.js",
  "quadFeature.js",
  "canvasRenderer.js",
- "tileLayer.js"
+ "tileLayer.js",
+ "heatmapFeature.js"
  ]
  },
  "geo.d3": {

src/canvas/heatmapFeature.js

@@ -0,0 +1,207 @@
+var inherit = require('../inherit');
+var registerFeature = require('../registry').registerFeature;
+var heatmapFeature = require('../heatmapFeature');
+
+//////////////////////////////////////////////////////////////////////////////
+/**
+ * Create a new instance of class heatmapFeature
+ * Inspired from
+ * https://github.com/mourner/simpleheat/blob/gh-pages/simpleheat.js
+ *
+ * @class geo.canvas.heatmapFeature
+ * @param {Object} arg Options object
+ * @extends geo.heatmapFeature
+ * @returns {canvas_heatmapFeature}
+ */
+//////////////////////////////////////////////////////////////////////////////
+var canvas_heatmapFeature = function (arg) {
+ 'use strict';
+
+ if (!(this instanceof canvas_heatmapFeature)) {
+ return new canvas_heatmapFeature(arg);
+ }
+ heatmapFeature.call(this, arg);
+
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * @private
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ var m_this = this,
+ s_exit = this._exit,
+ s_init = this._init,
+ s_update = this._update;
+
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Meta functions for converting from geojs styles to canvas.
+ * @private
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._convertColor = function (c) {
+ var color;
+ if (c.hasOwnProperty('r') &&
+ c.hasOwnProperty('g') &&
+ c.hasOwnProperty('b') &&
+ c.hasOwnProperty('a')) {
+ color = 'rgba(' + 255 * c.r + ',' + 255 * c.g + ','
+ + 255 * c.b + ',' + c.a + ')';
+ }
+ return color;
+ };
+
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Compute gradient (color lookup table)
+ * @protected
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._computeGradient = function () {
+ var canvas, stop, context2d, gradient, colors;
+
+ if (!m_this._grad) {
+ canvas = document.createElement('canvas');
+ context2d = canvas.getContext('2d');
+ gradient = context2d.createLinearGradient(0, 0, 0, 256);
+ colors = m_this.style('color');
+
+ canvas.width = 1;
+ canvas.height = 256;
+
+ for (stop in colors) {
+ gradient.addColorStop(stop, m_this._convertColor(colors[stop]));
+ }
+
+ context2d.fillStyle = gradient;
+ context2d.fillRect(0, 0, 1, 256);
+ m_this._grad = context2d.getImageData(0, 0, 1, 256).data;
+ }
+
+ return m_this;
+ };
+
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Create circle for each data point
+ * @protected
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._createCircle = function () {
+ var circle, ctx, r, r2, blur;
+ if (!m_this._circle) {
+ circle = m_this._circle = document.createElement('canvas');
+ ctx = circle.getContext('2d');
+ r = m_this.style('radius');
+ blur = m_this.style('blurRadius');
+
+ r2 = blur + r;
+
+ circle.width = circle.height = r2 * 2;
+ ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
+ ctx.shadowBlur = blur;
+ ctx.shadowColor = 'black';
+
+ ctx.beginPath();
+ ctx.arc(-r2, -r2, r, 0, Math.PI * 2, true);
+ ctx.closePath();
+ ctx.fill();
+ m_this._circle = circle;
+ }
+ return m_this;
+ };
+
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Compute color for each pixel on the screen
+ * @protected
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._colorize = function (pixels, gradient) {
+ var i, j;
+ for (i = 0; i < pixels.length; i += 4) {
+ // Get opacity from the temporary canvas image,
+ // then multiply by 4 to get the color index on linear gradient
+ j = pixels[i + 3] * 4;
+ if (j) {
+ pixels[i] = gradient[j];
+ pixels[i + 1] = gradient[j + 1];
+ pixels[i + 2] = gradient[j + 2];
+ pixels[i + 3] = m_this.style('opacity') * gradient[j + 3];
+ }
+ }
+ };
+
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Render each data point on canvas
+ * @protected
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._renderOnCanvas = function (context2d, map) {
+ var data = m_this.data() || [],
+ radius = m_this.style('radius') + m_this.style('blurRadius'),
+ pos, intensity, canvas, pixelArray;
+ m_this._createCircle();
+ m_this._computeGradient();
+ data.forEach(function (d) {
+ pos = m_this.layer().map().gcsToDisplay(m_this.position()(d));
+ intensity = (m_this.intensity()(d) - m_this.minIntensity()) /
+ (m_this.maxIntensity() - m_this.minIntensity());
+ // Small values are not visible because globalAlpha < .01
+ // cannot be read from imageData
+ context2d.globalAlpha = intensity < 0.01 ? 0.01 : intensity;
+ context2d.drawImage(m_this._circle, pos.x - radius, pos.y - radius);
+ });
+ canvas = m_this.layer().canvas()[0];
+ pixelArray = context2d.getImageData(0, 0, canvas.width, canvas.height);
+ m_this._colorize(pixelArray.data, m_this._grad);
+ context2d.putImageData(pixelArray, 0, 0);
+ return m_this;
+ };
+
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Initialize
+ * @protected
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._init = function () {
+ s_init.call(m_this, arg);
+ return m_this;
+ };
+
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Update
+ * @protected
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._update = function () {
+ s_update.call(m_this);
+ if (m_this.buildTime().getMTime() <= m_this.dataTime().getMTime() ||
+ m_this.updateTime().getMTime() < m_this.getMTime()) {
+ m_this._build();
+ }
+ m_this.updateTime().modified();
+ return m_this;
+ };
+
+ ////////////////////////////////////////////////////////////////////////////
+ /**
+ * Destroy
+ * @protected
+ */
+ ////////////////////////////////////////////////////////////////////////////
+ this._exit = function () {
+ s_exit.call(m_this);
+ };
+
+ m_this._init(arg);
+ return this;
+};
+
+inherit(canvas_heatmapFeature, heatmapFeature);
+
+// Now register it
+registerFeature('canvas', 'heatmap', canvas_heatmapFeature);
+module.exports = canvas_heatmapFeature;

src/canvas/index.js

@@ -4,5 +4,6 @@
 module.exports = {
  canvasRenderer: require('./canvasRenderer'),
  quadFeature: require('./quadFeature'),
+ heatmapFeature: require('./heatmapFeature'),
  tileLayer: require('./tileLayer')
 };