cartodb/torque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add example for renderRange method

Browse Source
This commit is contained in:
Raul Ochoa 2015-12-15 14:57:48 +01:00
parent d478fdc1b0
commit db961cf4b2
1 changed files with 80 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
examples/render-range_leaflet.html Normal file
View File

@ -0,0 +1,80 @@
<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>
<script src="../dist/torque.full.uncompressed.js"></script>
<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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <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',
cartocss: CARTOCSS
});
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>