2015-12-15 21:57:48 +08:00
< html >
< link rel = "stylesheet" href = "vendor/leaflet.css" / >
< style >
#map, html, body {
width: 100%; height: 100%; padding: 0; margin: 0;
}
#range-control {
text-align: right;
padding: 4px 0;
}
< / style >
< body >
< div id = "range-control" >
Render range:
< label for = "start" > start< / label > < input id = "start" value = "90" >
< label for = "end" > end< / label > < input id = "end" value = "180" >
< button onclick = "renderRange()" > Apply< / button >
< button onclick = "resetRenderRange()" > Reset< / button >
< / div >
< div id = "map" > < / div >
< script src = "vendor/leaflet.js" > < / script >
2018-12-03 21:53:13 +08:00
< script src = "https://libs.cartocdn.com/torque.js/2.16.5/torque.full.js" > < / script >
2015-12-15 21:57:48 +08:00
< script >
// define the torque layer style using cartocss
var CARTOCSS = [
'Map {',
' -torque-frame-count: 360;',
' -torque-animation-duration: 30;',
' -torque-time-attribute: "cartodb_id";',
' -torque-aggregation-function: "count(cartodb_id)";',
' -torque-resolution: 1;',
' -torque-data-aggregation: linear;',
'}',
'#generate_series {',
' comp-op: lighter;',
' marker-fill-opacity: 0.9;',
' marker-line-color: #FFF;',
' marker-line-width: 0;',
' marker-line-opacity: 1;',
' marker-type: rectable;',
' marker-width: 6;',
' marker-fill: #0F3B82;',
'}'
].join('\n');
var map = new L.Map('map', {
zoomControl: true,
center: [0, 0],
zoom: 2
});
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '© < a href = "http://www.openstreetmap.org/copyright" > OpenStreetMap< / a > contributors, © < a href = "http://cartodb.com/attributions" > CartoDB< / a > '
}).addTo(map);
var torqueLayer = new L.TorqueLayer({
user: 'documentation',
sql: 'SELECT s + 181 as cartodb_id, st_transform(ST_SetSRID (st_makepoint(s, 10*sin(s)), 4326), 3857) as the_geom_webmercator FROM generate_series(-180, 180, 1) as s',
2018-12-03 21:53:13 +08:00
cartocss: CARTOCSS,
tiler_protocol: 'https'
2015-12-15 21:57:48 +08:00
});
torqueLayer.error(console.warn);
torqueLayer.addTo(map);
torqueLayer.play();
function renderRange() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
torqueLayer.renderRange(+start, +end);
}
function resetRenderRange() {
torqueLayer.resetRenderRange();
}
< / script >
< / body >
< / html >
