heatmaps

lib/torque/renderer/point.js

@@ -146,8 +146,8 @@ var heat = require('./simpleheat');
     //
     // renders all the layers (and frames for each layer) from cartocss
     //
-    renderTile: function(tile, key) {
-      this._renderTile(tile, 0, 0, null, null);
+    renderTile: function(tile, key, pos) {
+      this._renderTile(tile, key, 0, null, null, null, pos);
       /*var prof = Profiler.metric('torque.renderer.point.renderLayers').start();
       var layers = this._shader.getLayers();
       for(var i = 0, n = layers.length; i < n; ++i ) {
@@ -182,7 +182,7 @@ var heat = require('./simpleheat');
     // renders a tile in the canvas for key defined in 
     // the torque tile
     //
-    _renderTile: function(tile, key, frame_offset, sprites, shader, shaderVars) {
+    _renderTile: function(tile, key, frame_offset, sprites, shader, shaderVars, pos) {
       if(!this._canvas || !this._heat) return;
 
       var prof = Profiler.metric('torque.renderer.point.renderTile').start();
@@ -198,8 +198,7 @@ var heat = require('./simpleheat');
           if(c) {
              var x = tile.x[posIdx];
              var y = tileMax - tile.y[posIdx]; // flip mercator
-             this._heat.add([x, y, c]);
-             this._ctx.fillRect(x, y, 2, 2);
+             this._heat.add([pos.x + x, pos.y + y, c]);
           }
         }
       }
@@ -207,6 +206,7 @@ var heat = require('./simpleheat');
     },
 
     flush: function() {
+      this._ctx.setTransform(1, 0, 0, 1, 0, 0);
       if(!this._heat) return;
       this._heat.draw();
       this._heat.clear();

lib/torque/renderer/simpleheat.js

@@ -110,15 +110,14 @@ simpleheat.prototype = {
         // draw a grayscale heatmap by putting a blurred circle at each data point
         for (var i = 0, len = this._data.length, p; i < len; i++) {
             p = this._data[i];
-
             ctx.globalAlpha = Math.max(p[2] / this._max, minOpacity === undefined ? 0.05 : minOpacity);
             ctx.drawImage(this._circle, p[0] - this._r, p[1] - this._r);
         }
 
         // colorize the heatmap, using opacity value of each pixel to get the right color from our gradient
-        //var colored = ctx.getImageData(0, 0, this._width, this._height);
-        //this._colorize(colored.data, this._grad);
-        //ctx.putImageData(colored, 0, 0);
+        var colored = ctx.getImageData(0, 0, this._canvas.width, this._canvas.height);
+        this._colorize(colored.data, this._grad);
+        ctx.putImageData(colored, 0, 0);
 
         return this;
     },