Skip to content

Instantly share code, notes, and snippets.

@danicarrion

danicarrion/index.html

Created May 20, 2015 18:33
Show Gist options
  • Save danicarrion/dcaf6f00a71aa55134b4 to your computer and use it in GitHub Desktop.
Save danicarrion/dcaf6f00a71aa55134b4 to your computer and use it in GitHub Desktop.
Download ZIP
createLayer with torque category layer
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Torque category selector</title>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
<style type="cartocss/text" id="cartocss">
Map {
-torque-frame-count:512;
-torque-animation-duration:30;
-torque-time-attribute:"cartodb_id";
-torque-aggregation-function:"CDB_Math_Mode(torque_category)";
-torque-resolution:2;
-torque-data-aggregation:linear;
}
#twitter_test_bbva{
comp-op: source-over;
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-width: 1.5;
marker-line-opacity: 1;
marker-type: ellipse;
marker-width: 6;
marker-fill: #FF9900;
}
#twitter_test_bbva[frame-offset=1] {
marker-width:8;
marker-fill-opacity:0.45;
}
#twitter_test_bbva[frame-offset=2] {
marker-width:10;
marker-fill-opacity:0.225;
}
#twitter_test_bbva[value=1] {
marker-fill: #FFCC00;
}
#twitter_test_bbva[value=2] {
marker-fill: #1F78B4;
}
#twitter_test_bbva[value=3] {
marker-fill: #FF2900;
}
#twitter_test_bbva[value=4] {
marker-fill: #33A02C;
}
</style>
</head>
<body>
<div>
<label><input type="checkbox" checked value="1" id="en" name="language">English</label>
<label><input type="checkbox" checked value="2" id="es" name="language">Spanish</label>
<label><input type="checkbox" checked value="3" id="it" name="language">Italian</label>
<label><input type="checkbox" checked value="4" id="lt" name="language">Whatever "lt" means</label>
</div>
<div id="map" style="width: 100%; height: 700px"></div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
<script>
var torqueLayer;
var map = L.map('map', {
zoomControl: false,
center: [43, 0],
zoom: 3
});
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);
cartodb.createLayer(map, {
type: "torque",
options: {
query: "select *, (case when twitter_lang = 'en' then 1 when twitter_lang = 'it' then 2 when twitter_lang = 'lt' then 3 when twitter_lang = 'es' then 4 end) as torque_category from twitter_test_bbva",
user_name: "dcarrion",
table_name: "twitter_test_bbva",
cartocss: $("#cartocss").html()
}
}).addTo(map)
.done(function(layer) {
console.log($("#cartocss").html());
torqueLayer = layer;
});
$("input[name='language']").change(function(){
var categories = [];
$.each($("input[name='language']:checked"), function(){
categories.push({name: $(this).attr("id"), category: $(this).val()});
});
var caseStr = "";
for (var i = 0; i < categories.length; i++) {
caseStr += " when twitter_lang = '" + categories[i].name + "' then '" + categories[i].category + "'";
}
if (caseStr) {
console.log("select *, (case " + caseStr + " end) as torque_category from twitter_test_bbva");
torqueLayer.setSQL("select *, (case " + caseStr + " end) as torque_category from twitter_test_bbva");
} else {
console.log("EEE");
torqueLayer.setSQL("select null limit 0;");
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment