Old school D3 from simpler times

All examples By author By category About

andrewxhill

Full window Github gist

Space Launch Report - An example of Torque with labels

<!DOCTYPE html>
<html>
  <head>
    <title>Space Launch Report | CartoDB.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="https://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>

<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>

<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

<script>
      var mouseDown = 0;
      document.body.onmousedown = function() { 
        ++mouseDown;
      }
      document.body.onmouseup = function() {
        --mouseDown;
      }
      function main() {
        cartodb.createVis('map', 'https://team.cartodb.com/api/v2/viz/5dd131d4-61ce-11e4-bb81-0e4fddd5de28/viz.json', {
            shareable: true,
            title: true,
            description: true,
            search: true,
            tiles_loader: true
        })
        .done(function(vis, layers) {
          var torqueLayer = layers[2];
          var tt;
          torqueLayer.stop();
          torqueLayer.on('load', function() {
            torqueLayer.play();
          });

function updateSql(){
            var sql = "SELECT * FROM launches_2013_by_site WHERE date < to_timestamp ("+tt.getTime()+"/1000) ORDER BY date DESC limit 5";
            staticLayer.setSQL(sql);
          }
          torqueLayer.on('change:time', function(changes) {
            if(changes.time && !isNaN( changes.time.getTime() )){
              tt = changes.time;
              if (on && mouseDown) {
                $('body').mouseup(function(){
                  updateSql();
                  $('body').unbind('mouseup')
                })
              }
            } 
          });
          var staticLayer = layers[1].getSubLayer(1);
                  staticLayer.setSQL("SELECT * FROM launches_2013_by_site LIMIT 0");
          var on = false;
          $('a.button').click(function(){
            setTimeout(function(){
              if(torqueLayer.isRunning()){
                if (on){
                  staticLayer.setSQL("SELECT * FROM launches_2013_by_site LIMIT 0");
                  on = false;
                }
              } else {
                if (!on){
                  updateSql();
                  on = true;
                }
              }
            },100)
          })
          // },100)

})
        .error(function(err) {
          console.log(err);
        });
      }

window.onload = main;
    </script>
  </body>
</html>

Modified http://libs.cartocdn.com/cartodb.js/v3/cartodb.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/cartodb.js