wip

examples/leaflet.html

@@ -15,14 +15,15 @@
     <script src="../lib/torque/leaflet/canvas_layer.js"></script>
     <script src="../lib/torque/renderer/point.js"></script>
     <script src="../lib/torque/provider.json.js"></script>
+    <script src="../lib/torque/provider.jsonarray.js"></script>
 
 
     <script>
       var map = new L.Map('map', {
         zoomControl: true,
-        //center: [43, 0],
+        center: [0, 0],
-        center: [60.20639271653636, 25.004882812],
+        //center: [60.20639271653636, 25.004882812],
-        zoom: 13
+        zoom: 3
       });
 
 
@@ -34,7 +35,8 @@
           this.key = 0;
 
           L.CanvasLayer.prototype.initialize.call(this, options);
-          this.provider = new torque.providers.json(options);
+          //this.provider = new torque.providers.json(options);
+          this.provider = new torque.providers.JsonArray(options);
           this.renderer = new torque.renderer.Point(this.getCanvas(), options);
           
           // for each tile shown on the map request the data
@@ -71,9 +73,14 @@
         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/density/tile.tcjson?key=7bd65a7a-f762-11e1-a439-00145eb45e9a&x={x}&y={y}&z={z}&type=DATASET'
       var torqueLayer = new L.TorqueLayer({
-        url: 'http://development.localhost.lan:8080/api/v1/sql',
+        //url: 'http://development.localhost.lan:8080/api/v1/sql',
-        resolution: 1,
+        url: GBIF_URL,
+        resolution: 4,
+        cummulative: true,
         start_date: 0,
         end_date: 220,
         step: 1,
@@ -85,11 +92,11 @@
 
       torqueLayer.addTo(map);
 
-        torqueLayer.setKey(1);
+      torqueLayer.setKey(2);
       var t = 0;
       setInterval(function() {
-        torqueLayer.setKey(t++%200);
+        torqueLayer.setKey(2 + (t++%11));
-      }, 16);
+      }, 500);
     
     </script>
   </body>

lib/torque/provider.jsonarray.js

@@ -0,0 +1,163 @@
+(function(exports) {
+
+  exports.torque = exports.torque || {};
+  var providers = exports.torque.providers = exports.torque.providers || {};
+
+  // format('hello, {0}', 'rambo') -> "hello, rambo"
+  function format(str, attrs) {
+    for(var i = 1; i < arguments.length; ++i) {
+      var attrs = arguments[i];
+      for(var attr in attrs) {
+        str = str.replace(RegExp('\\{' + attr + '\\}', 'g'), attrs[attr]);
+      }
+    }
+    return str;
+  }
+
+  var json = function (options) {
+    // check options
+    this.options = options;
+  };
+
+  json.prototype = {
+
+    /**
+     *
+     */
+    proccessTile: function(rows, coord, zoom) {
+      var r;
+      var x = new Uint8Array(rows.length);
+      var y = new Uint8Array(rows.length);
+      var self = this;
+
+      // decode into a javascript strcuture the array
+      function decode_row(row) {
+        var HEADER_SIZE = 3;
+        var o = {
+          x: row.data[0] * self.options.resolution,
+          y: row.data[1] * self.options.resolution,
+          valuesCount: row.data[2],
+          times: [],
+          values: [],
+        };
+        for (var s = 0; s < o.valuesCount; ++s) {
+           o.times.push(row.data[HEADER_SIZE + s]);
+           o.values.push(row.data[HEADER_SIZE + o.valuesCount + s]);
+        }
+        if(self.options.cummulative) {
+          for (var s = 1; s < o.valuesCount; ++s) {
+           o.values[s] += o.values[s - 1];
+          }
+        }
+        return o
+      }
+
+      // decode all the rows
+      for (r = 0; r < rows.length; ++r) {
+        rows[r] = decode_row(rows[r]);
+      }
+
+      // count number of dates
+      var dates = 0;
+      var maxDateSlots = 0;
+      for (r = 0; r < rows.length; ++r) {
+        var row = rows[r];
+        dates += row.times.length;
+        maxDateSlots = Math.max(maxDateSlots, row.times.length);
+      }
+      console.log(maxDateSlots);
+
+      // reserve memory for all the dates
+      var timeIndex = new Int32Array(maxDateSlots); //index-size
+      var timeCount = new Int32Array(maxDateSlots);
+      var renderData = new Uint8Array(dates);
+      var renderDataPos = new Uint32Array(dates);
+
+      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;
+        console.log(row.x, row.y);
+
+        var dates = row.times;
+        var vals = row.values;
+        for (var j = 0, len = dates.length; j < len; ++j) {
+            var rr = rowsPerSlot[dates[j]] || (rowsPerSlot[dates[j]] = []);
+            rr.push([r, vals[j]]);
+        }
+      }
+
+      // for each timeslot search active buckets
+      var renderDataIndex = 0;
+      var timeSlotIndex = 0;
+      for(var i = 0; i < maxDateSlots; ++i) {
+        var c = 0;
+        var slotRows = rowsPerSlot[i]
+        if(slotRows) {
+          for (var r = 0; r < slotRows.length; ++r) {
+            var rr = slotRows[r];
+            ++c;
+            renderDataPos[renderDataIndex] = rr[0]
+            renderData[renderDataIndex] = rr[1];
+            ++renderDataIndex;
+          }
+        }
+        timeIndex[i] = timeSlotIndex;
+        timeCount[i] = c;
+        timeSlotIndex += c;
+      }
+
+      return {
+        x: x,
+        y: y,
+        coord: {
+          x: coord.x,
+          y: coord.y,
+          z: zoom
+        },
+        timeCount: timeCount,
+        timeIndex: timeIndex,
+        renderDataPos: renderDataPos,
+        renderData: renderData
+      };
+    },
+
+    url: function() {
+      return this.options.url;
+    },
+
+    /**
+     * `coord` object like {x : tilex, y: tiley } 
+     * `zoom` quadtree zoom level
+     */
+    getTileData: function(coord, zoom, callback) {
+      var template = this.url();
+      template = template
+        .replace('{x}', coord.x)
+        .replace('{y}', coord.y)
+        .replace('{z}', coord.zoom);
+
+      var self = this;
+      torque.net.get(template, function (data) {
+        
+        try {
+          var rows = JSON.parse(data.responseText).rows;
+          callback(self.proccessTile(rows, coord, zoom));
+        } catch(e) {
+          console.log(template);
+          console.error("problem parsing JSON on ", coord, zoom);
+        }
+
+      });
+    }
+
+  };
+
+  torque.providers.JsonArray = json
+
+
+})(typeof exports === "undefined" ? this : exports);

test/provider.jsonarray.js

@@ -0,0 +1,15 @@
+
+test("processTile", function() {
+  var json = new torque.providers.JsonArray({
+    url: "http://test.com/{z}/{x}/{y}.json"
+  });
+  var tile = json.proccessTile(jsonarray_fixture.rows, {
+    x: 0, 
+    y: 0,
+    z: 0
+  });
+  ok(tile);
+  equal(jsonarray_fixture.rows.length, tile.x.length);
+  equal(jsonarray_fixture.rows.length, tile.y.length);
+
+});

test/suite.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>QUnit Example</title>
+  <link rel="stylesheet" href="vendor/qunit.css">
+</head>
+<body>
+  <div id="qunit"></div>
+  <div id="qunit-fixture"></div>
+  <script src="vendor/qunit.js"></script>
+
+  <script src="../lib/torque/provider.jsonarray.js"></script>
+
+  <script src="data/torque.array.json"></script>
+  <script src="provider.jsonarray.js"></script>
+</body>
+</html>

test/vendor/qunit.css

@@ -0,0 +1,244 @@
+/**
+ * QUnit v1.12.0 - A JavaScript Unit Testing Framework
+ *
+ * http://qunitjs.com
+ *
+ * Copyright 2012 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+/** Font Family and Sizes */
+
+#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
+	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
+}
+
+#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
+#qunit-tests { font-size: smaller; }
+
+
+/** Resets */
+
+#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
+	margin: 0;
+	padding: 0;
+}
+
+
+/** Header */
+
+#qunit-header {
+	padding: 0.5em 0 0.5em 1em;
+
+	color: #8699a4;
+	background-color: #0d3349;
+
+	font-size: 1.5em;
+	line-height: 1em;
+	font-weight: normal;
+
+	border-radius: 5px 5px 0 0;
+	-moz-border-radius: 5px 5px 0 0;
+	-webkit-border-top-right-radius: 5px;
+	-webkit-border-top-left-radius: 5px;
+}
+
+#qunit-header a {
+	text-decoration: none;
+	color: #c2ccd1;
+}
+
+#qunit-header a:hover,
+#qunit-header a:focus {
+	color: #fff;
+}
+
+#qunit-testrunner-toolbar label {
+	display: inline-block;
+	padding: 0 .5em 0 .1em;
+}
+
+#qunit-banner {
+	height: 5px;
+}
+
+#qunit-testrunner-toolbar {
+	padding: 0.5em 0 0.5em 2em;
+	color: #5E740B;
+	background-color: #eee;
+	overflow: hidden;
+}
+
+#qunit-userAgent {
+	padding: 0.5em 0 0.5em 2.5em;
+	background-color: #2b81af;
+	color: #fff;
+	text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
+}
+
+#qunit-modulefilter-container {
+	float: right;
+}
+
+/** Tests: Pass/Fail */
+
+#qunit-tests {
+	list-style-position: inside;
+}
+
+#qunit-tests li {
+	padding: 0.4em 0.5em 0.4em 2.5em;
+	border-bottom: 1px solid #fff;
+	list-style-position: inside;
+}
+
+#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running  {
+	display: none;
+}
+
+#qunit-tests li strong {
+	cursor: pointer;
+}
+
+#qunit-tests li a {
+	padding: 0.5em;
+	color: #c2ccd1;
+	text-decoration: none;
+}
+#qunit-tests li a:hover,
+#qunit-tests li a:focus {
+	color: #000;
+}
+
+#qunit-tests li .runtime {
+	float: right;
+	font-size: smaller;
+}
+
+.qunit-assert-list {
+	margin-top: 0.5em;
+	padding: 0.5em;
+
+	background-color: #fff;
+
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+}
+
+.qunit-collapsed {
+	display: none;
+}
+
+#qunit-tests table {
+	border-collapse: collapse;
+	margin-top: .2em;
+}
+
+#qunit-tests th {
+	text-align: right;
+	vertical-align: top;
+	padding: 0 .5em 0 0;
+}
+
+#qunit-tests td {
+	vertical-align: top;
+}
+
+#qunit-tests pre {
+	margin: 0;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+#qunit-tests del {
+	background-color: #e0f2be;
+	color: #374e0c;
+	text-decoration: none;
+}
+
+#qunit-tests ins {
+	background-color: #ffcaca;
+	color: #500;
+	text-decoration: none;
+}
+
+/*** Test Counts */
+
+#qunit-tests b.counts                       { color: black; }
+#qunit-tests b.passed                       { color: #5E740B; }
+#qunit-tests b.failed                       { color: #710909; }
+
+#qunit-tests li li {
+	padding: 5px;
+	background-color: #fff;
+	border-bottom: none;
+	list-style-position: inside;
+}
+
+/*** Passing Styles */
+
+#qunit-tests li li.pass {
+	color: #3c510c;
+	background-color: #fff;
+	border-left: 10px solid #C6E746;
+}
+
+#qunit-tests .pass                          { color: #528CE0; background-color: #D2E0E6; }
+#qunit-tests .pass .test-name               { color: #366097; }
+
+#qunit-tests .pass .test-actual,
+#qunit-tests .pass .test-expected           { color: #999999; }
+
+#qunit-banner.qunit-pass                    { background-color: #C6E746; }
+
+/*** Failing Styles */
+
+#qunit-tests li li.fail {
+	color: #710909;
+	background-color: #fff;
+	border-left: 10px solid #EE5757;
+	white-space: pre;
+}
+
+#qunit-tests > li:last-child {
+	border-radius: 0 0 5px 5px;
+	-moz-border-radius: 0 0 5px 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+}
+
+#qunit-tests .fail                          { color: #000000; background-color: #EE5757; }
+#qunit-tests .fail .test-name,
+#qunit-tests .fail .module-name             { color: #000000; }
+
+#qunit-tests .fail .test-actual             { color: #EE5757; }
+#qunit-tests .fail .test-expected           { color: green;   }
+
+#qunit-banner.qunit-fail                    { background-color: #EE5757; }
+
+
+/** Result */
+
+#qunit-testresult {
+	padding: 0.5em 0.5em 0.5em 2.5em;
+
+	color: #2b81af;
+	background-color: #D2E0E6;
+
+	border-bottom: 1px solid white;
+}
+#qunit-testresult .module-name {
+	font-weight: bold;
+}
+
+/** Fixture */
+
+#qunit-fixture {
+	position: absolute;
+	top: -10000px;
+	left: -10000px;
+	width: 1000px;
+	height: 1000px;
+}