wip
This commit is contained in:
parent
a7190a86c8
commit
7a6e223151
@ -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: [60.20639271653636, 25.004882812],
|
||||
zoom: 13
|
||||
center: [0, 0],
|
||||
//center: [60.20639271653636, 25.004882812],
|
||||
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',
|
||||
resolution: 1,
|
||||
//url: 'http://development.localhost.lan:8080/api/v1/sql',
|
||||
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);
|
||||
}, 16);
|
||||
torqueLayer.setKey(2 + (t++%11));
|
||||
}, 500);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
163
lib/torque/provider.jsonarray.js
Normal file
163
lib/torque/provider.jsonarray.js
Normal file
@ -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);
|
1
test/data/torque.array.json
Normal file
1
test/data/torque.array.json
Normal file
File diff suppressed because one or more lines are too long
15
test/provider.jsonarray.js
Normal file
15
test/provider.jsonarray.js
Normal file
@ -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);
|
||||
|
||||
});
|
18
test/suite.html
Normal file
18
test/suite.html
Normal file
@ -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>
|
244
test/vendor/qunit.css
vendored
Normal file
244
test/vendor/qunit.css
vendored
Normal file
@ -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;
|
||||
}
|
2212
test/vendor/qunit.js
vendored
Normal file
2212
test/vendor/qunit.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user