TileCanvas version working

examples/leaflet.html

@@ -35,7 +35,7 @@
       //type=DATASET
 //var GBIF_URL = 'http://apidev.gbif.org/map/density/tile.tcjson?key=8575f23e-f762-11e1-a439-00145eb45e9a&x={x}&y={y}&z={z}&type=DATASET'
      var GBIF_URL = 'http://apidev.gbif.org/map/density/tile/density/tile.tcjson?key=1&x={x}&y={y}&z={z}&type=TAXON'
-      var torqueLayer = new L.TorqueLayer({
+      var torqueLayer = new L.TiledTorqueLayer({
         //url: 'http://development.localhost.lan:8080/api/v1/sql',
         provider: 'url_template',
         url: GBIF_URL,

examples/navy.html

@@ -31,7 +31,7 @@
         zoom: 3
       });
 
-      L.tileLayer('http://b.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/999/256/{z}/{x}/{y}.png', {
+      L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
         attribution: 'Stamen'
       }).addTo(map);
 
@@ -42,9 +42,7 @@
         table      : 'ow',
         column     : 'date',
         countby    : 'count(cartodb_id)',
-        resolution: 2,
-        start_date: 0,
-        end_date: 220,
+        resolution: 1,
         is_time: true,
         steps: 750,
         pixel_size: 3,

lib/torque/leaflet/torque.js

@@ -77,3 +77,64 @@ L.TorqueLayer = L.CanvasLayer.extend({
   }
 
 });
+
+
+L.TiledTorqueLayer = L.TileLayer.Canvas.extend({
+
+  providers: {
+    'sql_api': torque.providers.json,
+    'url_template': torque.providers.JsonArray
+  },
+
+  renderers: {
+    'point': torque.renderer.Point,
+    'pixel': torque.renderer.Rectangle
+  },
+
+  initialize: function(options) {
+    var self = this;
+    this.key = 0;
+
+    options.async = true;
+    L.TileLayer.Canvas.prototype.initialize.call(this, options);
+
+
+    this.options.renderer = this.options.renderer || 'pixel';
+
+    this.provider = new this.providers[this.options.provider](options);
+    this.renderer = new this.renderers[this.options.renderer](null, options);
+
+  },
+
+  _tileLoaded: function(tile, tilePoint, tileData) {
+    this._tiles[tilePoint.x + ':' + tilePoint.y].data = tileData;
+    this.drawTile(tile);
+  },
+
+  _loadTile: function(tile, tilePoint) {
+    var self = this;
+    L.TileLayer.Canvas.prototype._loadTile.apply(this, arguments);
+    this.provider.getTileData(tilePoint, this._map.getZoom(), function(tileData) {
+      self._tileLoaded(tile, tilePoint, tileData);
+      L.DomUtil.addClass(tile, 'leaflet-tile-loaded');
+    });
+  },
+
+  drawTile: function (tile) {
+    var canvas = tile;
+    if(!tile.data) return;
+    canvas.width = canvas.width;
+
+    this.renderer.setCanvas(canvas);
+
+    var accum = this.renderer.accumulate(tile.data, this.key);
+    this.renderer.renderTileAccum(accum, 0, 0);
+  },
+
+  setKey: function(key) {
+    this.key = key;
+    this.redraw();
+  }
+
+});
+

lib/torque/provider.jsonarray.js

@@ -139,19 +139,24 @@
       template = template
         .replace('{x}', coord.x)
         .replace('{y}', coord.y)
-        .replace('{z}', coord.zoom);
+        .replace('{z}', zoom);
 
       var self = this;
       torque.net.get(template, function (data) {
+        var processed = null;
         
         try {
           var rows = JSON.parse(data.responseText).rows;
-          callback(self.proccessTile(rows, coord, zoom));
+          processed = self.proccessTile(rows, coord, zoom);
         } catch(e) {
-          console.log(template);
+          console.log(e.stack);
           console.error("problem parsing JSON on ", coord, zoom);
         }
 
+        if(processed) {
+          callback(processed);
+        }
+
       });
     }
 

lib/torque/renderer/point.js

@@ -33,6 +33,11 @@
 
   PointRenderer.prototype = {
 
+    setCanvas: function(canvas) {
+      this._canvas = canvas;
+      this._ctx = canvas.getContext('2d');
+    },
+
     //
     // sets the cartocss style to render stuff
     //
@@ -55,7 +60,7 @@
         value: value
       }, { zoom: tile.zoom });
 
-      var pointSize = st['point-radius'] * 2;
+      var pointSize = st['point-radius'];
       if(!pointSize) {
         throw new Error("marker-width property should be set");
       }

lib/torque/renderer/rectangle.js

@@ -45,24 +45,29 @@
   // this renderer just render points depending of the value
   // 
   function RectanbleRenderer(canvas, options) {
-    if (!canvas) {
-      throw new Error("canvas can't be undefined");
-    }
     this.options = options;
-    this._canvas = canvas;
-    this._ctx = canvas.getContext('2d');
+    this.setCanvas(canvas);
     this._colors = DEFAULT_COLORS;//DEFAULT_COLORS.map(hexToRgb);
-
   }
 
   RectanbleRenderer.prototype = {
 
+    setCanvas: function(canvas) {
+      if(!canvas) return;
+      this._canvas = canvas;
+      this._ctx = canvas.getContext('2d');
+    },
+
     accumulate: function(tile, keys) {
       var x, y, posIdx, p, k, key, activePixels, pixelIndex;
       var res = this.options.resolution;
       var s = 256/res;
       var accum = new Float32Array(s*s);
 
+      if(typeof(keys) !== 'object') {
+        keys = [keys];
+      }
+
       for(k = 0; k < keys.length; ++k) {
         key = keys[k];
         activePixels = tile.timeCount[key];
@@ -93,7 +98,7 @@
           var y = xy % s;
           var color = colors[pal(value)];//Math.min(value|0, colors.length - 1)];
           ctx.fillStyle = color;
-          ctx.fillRect(x * res, 255 - y * res, res, res);
+          ctx.fillRect(x * res, 256 - res - y * res, res, res);
         }
       }
     },