Last active
August 13, 2018 22:46
-
-
Save andrewxhill/e19848ddfb0521499f19 to your computer and use it in GitHub Desktop.
Space Launch Report - An example of Torque with labels
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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="http://cartodb.com/assets/favicon.ico" /> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
</style> | |
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" /> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script src="http://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', 'http://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) | |
}) | |
// },100) | |
}) | |
.error(function(err) { | |
console.log(err); | |
}); | |
} | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment