danicarrion/index.html

## 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>
	<!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>