Skip to content

Instantly share code, notes, and snippets.

@danicarrion

danicarrion/index.html

Created May 20, 2015 18:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save danicarrion/dcaf6f00a71aa55134b4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save danicarrion/dcaf6f00a71aa55134b4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. danicarrion created this gist May 20, 2015.
    109 changes: 109 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,109 @@
    <!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>