torque/examples/leaflet.html

57 lines
1.6 KiB
HTML
Raw Normal View History

2013-08-29 21:22:50 +08:00
<!DOCTYPE html>
2013-07-24 02:21:10 +08:00
<html>
<link rel="stylesheet" href="vendor/leaflet.css" />
2013-07-24 02:21:10 +08:00
<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="../dist/torque.full.uncompressed.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],
zoom: 6
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-30 00:57:17 +08:00
var torqueLayer = new L.TiledTorqueLayer({
2013-07-24 18:20:53 +08:00
//url: 'http://development.localhost.lan:8080/api/v1/sql',
2013-07-25 03:15:45 +08:00
provider: 'url_template',
2013-07-24 18:20:53 +08:00
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 03:15:45 +08:00
torqueLayer.setKey([11, 2]);
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>