Skip to content

Instantly share code, notes, and snippets.

@andy-esch

andy-esch/index.html

Last active August 29, 2015 14:17
Show Gist options
  • Save andy-esch/559afe1b77e5cb86788e to your computer and use it in GitHub Desktop.
Save andy-esch/559afe1b77e5cb86788e to your computer and use it in GitHub Desktop.
Download ZIP
tours of a dataset using torque.js
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Map Academy | CartoDB.js &amp; Torque.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;
}
#infobox {
width: 250px;
background: rgba(255,255,255,0.9);
border-radius: 5px;
position: absolute;
top: 15px;
left: 55px;
padding: 10px;
font-size: 2em;
}
</style>
<script type="cartocss/text" id="cartocss">
@w1: 50;
@w2: 40;
@w3: 30;
@w4: 20;
@w5: 10;
@w6: 5;
Map {
-torque-frame-count:256;
-torque-animation-duration:15;
-torque-time-attribute:"dates";
-torque-aggregation-function:"sum(vei)";
-torque-resolution:2;
-torque-data-aggregation:linear;
}
#volcanoeexplosions{
comp-op: lighter;
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-width: 0;
marker-line-opacity: 1;
marker-type: ellipse;
marker-width: 6;
marker-fill: #5CA2D1;
}
#volcanoeexplosions[value <= 100][value > 10]{
marker-width: @w1;
marker-fill: #F84F40;
#volcanoeexplosions[frame-offset=1] {
marker-width:1.3*@w1;
marker-fill-opacity:0.45;
}
#volcanoeexplosions[frame-offset=2] {
marker-width:1.6*@w1;
marker-fill-opacity:0.225;
}
#volcanoeexplosions[frame-offset=3] {
marker-width:1.9*@w1;
marker-fill-opacity:0.11;
}
}
#volcanoeexplosions[value <= 10][value > 6]{
marker-fill: #F84F40;
marker-width: @w2;
#volcanoeexplosions[frame-offset=1] {
marker-width:1.3*@w2;
marker-fill-opacity:0.45;
}
#volcanoeexplosions[frame-offset=2] {
marker-width:1.6*@w2;
marker-fill-opacity:0.225;
}
#volcanoeexplosions[frame-offset=3] {
marker-width:1.9*@w2;
marker-fill-opacity:0.11;
}
}
#volcanoeexplosions[value <= 6][value >= 5]{
marker-width: @w3;
#volcanoeexplosions[frame-offset=1] {
marker-width:1.3*@w3;
marker-fill-opacity:0.45;
}
#volcanoeexplosions[frame-offset=2] {
marker-width:1.6*@w3;
marker-fill-opacity:0.225;
}
#volcanoeexplosions[frame-offset=3] {
marker-width:1.9*@w3;
marker-fill-opacity:0.11;
}
}
#volcanoeexplosions[value < 5][value > 2]{
marker-width: @w4;
#volcanoeexplosions[frame-offset=1] {
marker-width:1.3*@w4;
marker-fill-opacity:0.45;
}
#volcanoeexplosions[frame-offset=2] {
marker-width:1.6*@w4;
marker-fill-opacity:0.225;
}
#volcanoeexplosions[frame-offset=3] {
marker-width:1.9*@w4;
marker-fill-opacity:0.11;
}
}
#volcanoeexplosions[value <= 2][value > 1]{
marker-width: @w5;
#volcanoeexplosions[frame-offset=1] {
marker-width:1.3*@w5;
marker-fill-opacity:0.45;
}
#volcanoeexplosions[frame-offset=2] {
marker-width:1.6*@w5;
marker-fill-opacity:0.225;
}
#volcanoeexplosions[frame-offset=3] {
marker-width:1.9*@w5;
marker-fill-opacity:0.11;
}
}
#volcanoeexplosions[value <= 1]{
marker-width: @w6;
#volcanoeexplosions[frame-offset=1] {
marker-width:1.3*@w6;
marker-fill-opacity:0.45;
}
#volcanoeexplosions[frame-offset=2] {
marker-width:1.6*@w6;
marker-fill-opacity:0.225;
}
#volcanoeexplosions[frame-offset=3] {
marker-width:1.9*@w6;
marker-fill-opacity:0.11;
}
}
</script>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<div id="infobox">
<p>When will the next big volcano blow??</p>
<div id="volcano"></div>
</div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script>
<script>
function main() {
var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{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>'
});
var map = new L.map('map', {
scrollWheelZoom: false,
center: [0,0],
zoom: 2
});
map.addLayer(layer);
var tableName = "volcanoeexplosions";
var userName = "andye";
var layerSource = {
type: 'torque',
options: {
table_name: tableName,
user_name: userName,
tile_style: $("#cartocss").html()
}
}
var layerSource2 = {
type: 'torque',
options: {
table_name: tableName,
user_name: userName,
tile_style: $("#cartocss2").html()
}
}
// var sql = new cartodb.SQL({user: userName});
// sql.execute("SELECT ST_X(the_geom) AS lon, ST_Y(the_geom) AS lat, name, dates, vei " + tableName + " WHERE vei > 5 OR name ~* 'helens'")
// .done(function(data) {
//
// });
var mtStHelens = 1980;
var tambora = 1815;
var santaMaria = 1902;
var novarupta = 1912;
var krakatoa = 1883;
var pinatubo = 1991;
cartodb.createLayer(map, layerSource)
.addTo(map)
.done(function(layer) {
var torqueLayer = layer;
torqueLayer.on('change:time', function(changes) {
var curr = (new Date(changes.time)).getFullYear();
console.log(torqueLayer.getStep());
if ( curr >= mtStHelens && curr < mtStHelens + 10 ) {
$("#infobox").find("p").html("Mount St. Helens goes boom in " + mtStHelens);
if ( Math.abs(curr - mtStHelens) === 0 ) {
torqueLayer.pause();
torqueLayer.setSQL("SELECT * FROM " + tableName + " LIMIT 10");
torqueLayer.on('change:bounds', function(bnds) {
console.log(bnds.bounds);
});
map.setView([46.1912, -122.1944],6,'animate');
$("#volcano").html("<img src='http://upload.wikimedia.org/wikipedia/commons/d/dc/MSH82_st_helens_plume_from_harrys_ridge_05-19-82.jpg' style='width: 243px; border: 1px solid black; border-radius: 4px;' />");
}
} else if ( Math.abs(curr - tambora) < 10 ) {
$("#infobox").find("p").html("Tambora goes boom in " + tambora);
$("#volcano").html("<img src='http://upload.wikimedia.org/wikipedia/commons/b/bd/Caldera_Mt_Tambora_Sumbawa_Indonesia.jpg' style='width: 243px; border: 1px solid black; border-radius: 4px;' />");
if ( Math.abs(curr - tambora) === 0 ) {
torqueLayer.pause();
map.setView([-8.246667, 117.958333],5,'animate');
}
} else if ( Math.abs(curr - santaMaria) < 10 ) {
$("#infobox").find("p").html("Santa Maria goes boom in " + santaMaria);
$("#volcano").html("<img src='http://upload.wikimedia.org/wikipedia/commons/8/8e/Santiaguito_from_Santamaria.jpg' style='width: 243px; border: 1px solid black; border-radius: 4px;' />");
if ( Math.abs(curr - santaMaria) === 0 ) {
torqueLayer.pause();
map.setView([14.756, -91.552],6,'animate');
}
} else if ( Math.abs(curr - krakatoa) < 10 ) {
$("#infobox").find("p").html("Krakatoa goes boom in " + krakatoa);
$("#volcano").html("<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Krakatoa_eruption_lithograph.jpg/1200px-Krakatoa_eruption_lithograph.jpg' style='width: 243px; border: 1px solid black; border-radius: 4px;' />");
if ( Math.abs(curr - krakatoa) === 0 ) {
torqueLayer.pause();
map.setView([-6.102, 105.423],4,'animate');
}
} else if ( Math.abs(curr - pinatubo) < 10 ) {
$("#infobox").find("p").html("Pinatubo goes boom in " + pinatubo);
$("#volcano").html("<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Pinatubo91eruption_clark_air_base.jpg/1200px-Pinatubo91eruption_clark_air_base.jpg' style='width: 243px; border: 1px solid black; border-radius: 4px;' />");
if ( Math.abs(curr - pinatubo) === 0 ) {
torqueLayer.pause();
map.setView([15.13,120.35],4,'animate');
}
} else {
$("#infobox").find("p").html("When will the next big volcano blow??");
$("#volcano").html("");
}
});
// torqueLayer.on('pause', function() {
// setTimeout(function(){ torqueLayer.play(); }, 3000);
// });
torqueLayer.on('play', function() {
map.setView([0,0],2, {animation: true});
});
})
.error(function(err) {
console.log("Error: " + 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