rectangle renderer

examples/leaflet.html

@@ -14,6 +14,7 @@
     <script src="../lib/torque/leaflet/leaflet_tileloader_mixin.js"></script>
     <script src="../lib/torque/leaflet/canvas_layer.js"></script>
     <script src="../lib/torque/renderer/point.js"></script>
+    <script src="../lib/torque/renderer/rectangle.js"></script>
     <script src="../lib/torque/provider.json.js"></script>
     <script src="../lib/torque/provider.jsonarray.js"></script>
 
@@ -37,7 +38,7 @@
           L.CanvasLayer.prototype.initialize.call(this, options);
           //this.provider = new torque.providers.json(options);
           this.provider = new torque.providers.JsonArray(options);
-          this.renderer = new torque.renderer.Point(this.getCanvas(), options);
+          this.renderer = new torque.renderer.Rectangle(this.getCanvas(), options);
           
           // for each tile shown on the map request the data
           this.on('tileAdded', function(t) {
@@ -58,7 +59,7 @@
             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);
+            this.renderer.renderTile(tile, this.key, pos.x, pos.y);
           }
         },
 
@@ -74,12 +75,12 @@
       }).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/density/tile.tcjson?key=7bd65a7a-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 GBIF_URL = 'http://apidev.gbif.org/map/density/tile/density/tile.tcjson?key=1&x={x}&y={y}&z={z}&type=DATASET'
       var torqueLayer = new L.TorqueLayer({
         //url: 'http://development.localhost.lan:8080/api/v1/sql',
         url: GBIF_URL,
-        resolution: 4,
+        resolution: 2,
         cummulative: true,
         start_date: 0,
         end_date: 220,
@@ -92,11 +93,11 @@
 
       torqueLayer.addTo(map);
 
-      torqueLayer.setKey(2);
+      torqueLayer.setKey(0);
       var t = 0;
       setInterval(function() {
-        torqueLayer.setKey(2 + (t++%11));
-      }, 500);
+        //torqueLayer.setKey(2 + (t++%11));
+      }, 1000);
     
     </script>
   </body>

lib/torque/provider.jsonarray.js

@@ -79,9 +79,7 @@
       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;
-        console.log(row.x, row.y);
+        y[r] = 255 - row.y;
 
         var dates = row.times;
         var vals = row.values;

lib/torque/renderer/rectangle.js

@@ -0,0 +1,94 @@
+(function(exports) {
+  exports.torque = exports.torque || {};
+  exports.torque.renderer = exports.torque.renderer || {};
+
+  var TAU = Math.PI * 2;
+  var DEFAULT_COLORS = [
+        "#FEE391",
+        "#FEC44F",
+        "#FE9929",
+        "#EC7014",
+        "#CC4C02",
+        "#993404",
+        "#662506"
+  ];
+
+  function hexToRgb(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? [
+      parseInt(result[1], 16),
+      parseInt(result[2], 16),
+      parseInt(result[3], 16),
+      255
+    ] : [0, 0, 0, 0];
+  }
+
+  //
+  // 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._colors = DEFAULT_COLORS;//DEFAULT_COLORS.map(hexToRgb);
+
+  }
+
+  RectanbleRenderer.prototype = {
+    //
+    // renders a tile in the canvas for key defined in 
+    // the torque tile
+    //
+    renderTile: function(tile, key, px, py) {
+      if(!this._canvas) return;
+
+      var res = this.options.resolution;
+
+      //var prof = Profiler.get('render').start();
+      var ctx = this._ctx;
+      var colors = this._colors;
+      var activePixels = tile.timeCount[key];
+      if(activePixels) {
+        var w = this._canvas.width;
+        var h = this._canvas.height;
+        //var imageData = ctx.getImageData(0, 0, w, h);
+        //var pixels = imageData.data;
+        var pixelIndex = tile.timeIndex[key];
+        for(var p = 0; p < activePixels; ++p) {
+          var posIdx = tile.renderDataPos[pixelIndex + p];
+          var c = tile.renderData[pixelIndex + p];
+          if(c) {
+           var color = colors[Math.min(c, colors.length - 1)];
+           var x = tile.x[posIdx];// + px;
+           var y = tile.y[posIdx]; //+ py;
+
+           ctx.fillStyle = color;
+           ctx.fillRect(x, y, 2*res, 2*res);
+           /*
+
+           for(var xx = 0; xx < res; ++xx) {
+            for(var yy = 0; yy < res; ++yy) {
+              var idx = 4*((x+xx) + w*(y + yy));
+              pixels[idx + 0] = color[0];
+              pixels[idx + 1] = color[1];
+              pixels[idx + 2] = color[2];
+              pixels[idx + 3] = color[3];
+            }
+           }
+           */
+          }
+        }
+        //ctx.putImageData(imageData, 0, 0);
+      }
+      //prof.end();
+    }
+  };
+
+
+  // exports public api
+  exports.torque.renderer.Rectangle = RectanbleRenderer;
+
+})(typeof exports === "undefined" ? this : exports);