2013-07-24 02:21:10 +08:00
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<link rel="stylesheet" href="../vendor/leaflet.css" />
|
|
|
|
|
<style>
|
|
|
|
|
#map, html, body {
|
|
|
|
|
width: 100%; height: 100%; padding: 0; margin: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
|
|
|
|
<script src="../vendor/leaflet.js"></script>
|
|
|
|
|
<script src="../lib/torque/request.js"></script>
|
|
|
|
|
<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>
|
2013-07-24 20:52:30 +08:00
|
|
|
<script src="../lib/torque/renderer/rectangle.js"></script>
|
2013-07-24 02:21:10 +08:00
|
|
|
<script src="../lib/torque/provider.json.js"></script>
|
2013-07-24 18:20:53 +08:00
|
|
|
<script src="../lib/torque/provider.jsonarray.js"></script>
|
2013-07-24 02:21:10 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var map = new L.Map('map', {
|
|
|
|
|
zoomControl: true,
|
2013-07-25 02:32:18 +08:00
|
|
|
//center: [0, 0],
|
|
|
|
|
center: [36.60670888641815, 38.627929687],
|
2013-07-24 18:20:53 +08:00
|
|
|
//center: [60.20639271653636, 25.004882812],
|
2013-07-25 02:32:18 +08:00
|
|
|
zoom: 6
|
2013-07-24 02:21:10 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
L.TorqueLayer = L.CanvasLayer.extend({
|
|
|
|
|
|
|
|
|
|
initialize: function(options) {
|
|
|
|
|
var self = this;
|
|
|
|
|
options.tileLoader = true;
|
|
|
|
|
this.key = 0;
|
|
|
|
|
|
|
|
|
|
L.CanvasLayer.prototype.initialize.call(this, options);
|
2013-07-24 18:20:53 +08:00
|
|
|
//this.provider = new torque.providers.json(options);
|
|
|
|
|
this.provider = new torque.providers.JsonArray(options);
|
2013-07-24 20:52:30 +08:00
|
|
|
this.renderer = new torque.renderer.Rectangle(this.getCanvas(), options);
|
2013-07-24 02:21:10 +08:00
|
|
|
|
|
|
|
|
// for each tile shown on the map request the data
|
|
|
|
|
this.on('tileAdded', function(t) {
|
|
|
|
|
var tileData = this.provider.getTileData(t, t.zoom, function(tileData) {
|
|
|
|
|
self._tileLoaded(t, tileData);
|
|
|
|
|
self.redraw();
|
|
|
|
|
});
|
|
|
|
|
}, this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
|
var canvas = this.getCanvas();
|
|
|
|
|
canvas.width = canvas.width;
|
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
|
|
2013-07-25 02:32:18 +08:00
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2013-07-24 02:21:10 +08:00
|
|
|
//ctx.clearRect(0, 0, canvas.width, canvas.height);
|
2013-07-25 02:32:18 +08:00
|
|
|
/*
|
2013-07-24 02:21:10 +08:00
|
|
|
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);
|
2013-07-24 20:52:30 +08:00
|
|
|
this.renderer.renderTile(tile, this.key, pos.x, pos.y);
|
2013-07-25 02:32:18 +08:00
|
|
|
}*/
|
2013-07-24 02:21:10 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setKey: function(t) {
|
2013-07-25 02:32:18 +08:00
|
|
|
this.key = [t];
|
|
|
|
|
this.redraw();
|
|
|
|
|
},
|
|
|
|
|
setKeys: function(t) {
|
2013-07-24 02:21:10 +08:00
|
|
|
this.key = t;
|
|
|
|
|
this.redraw();
|
2013-07-25 02:32:18 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2013-07-24 02:21:10 +08:00
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
2013-07-25 02:32:18 +08:00
|
|
|
L.tileLayer('http://b.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/999/256/{z}/{x}/{y}.png', {
|
2013-07-24 02:21:10 +08:00
|
|
|
attribution: 'Stamen'
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
|
2013-07-24 18:20:53 +08:00
|
|
|
//type=DATASET
|
2013-07-25 02:32:18 +08:00
|
|
|
//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'
|
2013-07-24 02:21:10 +08:00
|
|
|
var torqueLayer = new L.TorqueLayer({
|
2013-07-24 18:20:53 +08:00
|
|
|
//url: 'http://development.localhost.lan:8080/api/v1/sql',
|
|
|
|
|
url: GBIF_URL,
|
2013-07-25 02:32:18 +08:00
|
|
|
resolution: 4,
|
2013-07-24 18:20:53 +08:00
|
|
|
cummulative: true,
|
2013-07-24 02:21:10 +08:00
|
|
|
start_date: 0,
|
|
|
|
|
end_date: 220,
|
|
|
|
|
step: 1,
|
|
|
|
|
table: 'importing_1369045322_helsinki_manydays_live',
|
|
|
|
|
column: 'ac',
|
|
|
|
|
countby: 'count(mm)',
|
|
|
|
|
pixel_size: 3
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
torqueLayer.addTo(map);
|
|
|
|
|
|
2013-07-25 02:32:18 +08:00
|
|
|
torqueLayer.setKeys([11]);
|
2013-07-24 02:21:10 +08:00
|
|
|
var t = 0;
|
|
|
|
|
setInterval(function() {
|
2013-07-24 20:52:30 +08:00
|
|
|
//torqueLayer.setKey(2 + (t++%11));
|
|
|
|
|
}, 1000);
|
2013-07-24 02:21:10 +08:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
