createLayer with torque category layer
<!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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <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