81 lines
2.5 KiB
HTML
81 lines
2.5 KiB
HTML
<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: '© <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',
|
|
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>
|
|
|