fixed render prepration

examples/leaflet.html

@@ -22,9 +22,10 @@
     <script>
       var map = new L.Map('map', {
         zoomControl: true,
-        center: [0, 0],
+        //center: [0, 0],
+        center: [36.60670888641815,  38.627929687],
         //center: [60.20639271653636, 25.004882812],
-        zoom: 3
+        zoom: 6
       });
 
 
@@ -54,33 +55,51 @@
           canvas.width = canvas.width;
           var ctx = canvas.getContext('2d');
 
+          for(var t in this._tiles) {
+            var tile = this._tiles[t];
+            var pos = this.getTilePos(tile.coord);
+            var accum = this.renderer.accumulate(tile, this.key);
+            ctx.setTransform(1, 0, 0, 1, pos.x, pos.y);
+            this.renderer.renderTileAccum(accum, 0, 0);
+            //ctx.setTransform(1, 0, 0, 1, pos.x, pos.y);
+          }
+
+
           //ctx.clearRect(0, 0, canvas.width, canvas.height);
+          /*
           for(var t in this._tiles) {
             var tile = this._tiles[t];
             var pos = this.getTilePos(tile.coord);
             ctx.setTransform(1, 0, 0, 1, pos.x, pos.y);
             this.renderer.renderTile(tile, this.key, pos.x, pos.y);
-          }
+          }*/
         },
 
         setKey: function(t) {
+          this.key = [t];
+          this.redraw();
+        },
+        setKeys: function(t) {
           this.key = t;
           this.redraw();
-        }
+        },
+
+
+
 
       });
 
-      L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
+      L.tileLayer('http://b.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/999/256/{z}/{x}/{y}.png', {
         attribution: 'Stamen'
       }).addTo(map);
 
       //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 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=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({
         //url: 'http://development.localhost.lan:8080/api/v1/sql',
         url: GBIF_URL,
-        resolution: 2,
+        resolution: 4,
         cummulative: true,
         start_date: 0,
         end_date: 220,
@@ -93,7 +112,7 @@ var GBIF_URL = 'http://apidev.gbif.org/map/density/tile/density/tile.tcjson?key=
 
       torqueLayer.addTo(map);
 
-      torqueLayer.setKey(0);
+      torqueLayer.setKeys([11]);
       var t = 0;
       setInterval(function() {
         //torqueLayer.setKey(2 + (t++%11));

lib/torque/provider.jsonarray.js

@@ -63,23 +63,24 @@
       for (r = 0; r < rows.length; ++r) {
         var row = rows[r];
         dates += row.times.length;
-        maxDateSlots = Math.max(maxDateSlots, row.times.length);
+        for(var d = 0; d < row.times.length; ++d) {
+          maxDateSlots = Math.max(maxDateSlots, row.times[d]);
+        }
       }
-      console.log(maxDateSlots);
 
       // reserve memory for all the dates
-      var timeIndex = new Int32Array(maxDateSlots); //index-size
+      var timeIndex = new Int32Array(maxDateSlots + 1); //index-size
-      var timeCount = new Int32Array(maxDateSlots);
+      var timeCount = new Int32Array(maxDateSlots + 1);
       var renderData = new Uint8Array(dates);
       var renderDataPos = new Uint32Array(dates);
 
-      var rowsPerSlot = [];
+      var rowsPerSlot = {};
 
       // precache pixel positions
       for (var r = 0; r < rows.length; ++r) {
         var row = rows[r];
         x[r] = row.x;
-        y[r] = 255 - row.y;
+        y[r] = row.y;
 
         var dates = row.times;
         var vals = row.values;
@@ -92,7 +93,8 @@
       // for each timeslot search active buckets
       var renderDataIndex = 0;
       var timeSlotIndex = 0;
-      for(var i = 0; i < maxDateSlots; ++i) {
+      var i = 0;
+      for(var i = 0; i <= maxDateSlots; ++i) {
         var c = 0;
         var slotRows = rowsPerSlot[i]
         if(slotRows) {

lib/torque/renderer/rectangle.js

@@ -2,8 +2,25 @@
   exports.torque = exports.torque || {};
   exports.torque.renderer = exports.torque.renderer || {};
 
+
+  function palette(slots) {
+    var conds = []
+    for(var i = slots.length - 1; i >= 0; --i) {
+      conds.push("if( x >= " + slots[i] + ") return " + (i + 1)  + ";");
+    }
+    conds.push("return 0;");
+    var body = conds.join('\n');
+    return new Function("x", body);
+  }
+
+
+  var pal = palette([10, 100, 1000, 10000, 100000]);
+  console.log(pal(0), pal(11));
+
   var TAU = Math.PI * 2;
   var DEFAULT_COLORS = [
+  "#FFFF00", "#FFCC00", "#FF9900", "#FF6600", "#FF3300", "#CC0000"
+  /*
         "#FEE391",
         "#FEC44F",
         "#FE9929",
@@ -11,6 +28,7 @@
         "#CC4C02",
         "#993404",
         "#662506"
+        */
   ];
 
   function hexToRgb(hex) {
@@ -38,6 +56,48 @@
   }
 
   RectanbleRenderer.prototype = {
+
+    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);
+
+      for(k = 0; k < keys.length; ++k) {
+        key = keys[k];
+        activePixels = tile.timeCount[key];
+        if(activePixels) {
+          pixelIndex = tile.timeIndex[key];
+          for(p = 0; p < activePixels; ++p) {
+            posIdx = tile.renderDataPos[pixelIndex + p];
+            x = tile.x[posIdx]/res;
+            y = tile.y[posIdx]/res;
+            accum[x*s + y] += tile.renderData[pixelIndex + p];
+          }
+        }
+      }
+      return accum;
+    },
+
+    renderTileAccum: function(accum, px, py) {
+      var res = this.options.resolution;
+      var ctx = this._ctx;
+      var s = (256/res) | 0;
+      var s2 = s*s;
+      var colors = this._colors;
+      for(var i = 0; i < s2; ++i) {
+        var xy = i;
+        var value = accum[i];
+        if(value) {
+          var x = (xy/s) | 0;
+          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);
+        }
+      }
+    },
+
     //
     // renders a tile in the canvas for key defined in 
     // the torque tile
@@ -50,8 +110,8 @@
       //var prof = Profiler.get('render').start();
       var ctx = this._ctx;
       var colors = this._colors;
-      var activePixels = tile.timeCount[key];
+      var activepixels = tile.timeCount[key];
-      if(activePixels) {
+      if(activepixels) {
         var w = this._canvas.width;
         var h = this._canvas.height;
         //var imageData = ctx.getImageData(0, 0, w, h);
@@ -66,7 +126,7 @@
            var y = tile.y[posIdx]; //+ py;
 
            ctx.fillStyle = color;
-           ctx.fillRect(x, y, 2*res, 2*res);
+           ctx.fillRect(x, y, res, res);
            /*
 
            for(var xx = 0; xx < res; ++xx) {