index.html
<!DOCTYPE html>
<html>
<head>
<title>Space Launch Report | CartoDB.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="//cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
var mouseDown = 0;
document.body.onmousedown = function() {
++mouseDown;
}
document.body.onmouseup = function() {
--mouseDown;
}
function main() {
cartodb.createVis('map', '//team.cartodb.com/api/v2/viz/5dd131d4-61ce-11e4-bb81-0e4fddd5de28/viz.json', {
shareable: true,
title: true,
description: true,
search: true,
tiles_loader: true
})
.done(function(vis, layers) {
var torqueLayer = layers[2];
var tt;
torqueLayer.stop();
torqueLayer.on('load', function() {
torqueLayer.play();
});
function updateSql(){
var sql = "SELECT * FROM launches_2013_by_site WHERE date < to_timestamp ("+tt.getTime()+"/1000) ORDER BY date DESC limit 5";
staticLayer.setSQL(sql);
}
torqueLayer.on('change:time', function(changes) {
if(changes.time && !isNaN( changes.time.getTime() )){
tt = changes.time;
if (on && mouseDown) {
$('body').mouseup(function(){
updateSql();
$('body').unbind('mouseup')
})
}
}
});
var staticLayer = layers[1].getSubLayer(1);
staticLayer.setSQL("SELECT * FROM launches_2013_by_site LIMIT 0");
var on = false;
$('a.button').click(function(){
setTimeout(function(){
if(torqueLayer.isRunning()){
if (on){
staticLayer.setSQL("SELECT * FROM launches_2013_by_site LIMIT 0");
on = false;
}
} else {
if (!on){
updateSql();
on = true;
}
}
},100)
})
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</body>
</html>