Torque.js v2

Torque.js is an efficient and stylish rendering method to animate your data.

This library is still under support but it will not be further developed. We don’t recommend starting new projects with it as it will eventually become deprecated. Instead, learn more about our current CARTO for deck.gl library here

What is Torque.js?

Torque.js is an efficient and stylish rendering method to animate your data.

Torque.js uses TileCubes, which are JSON representations of multidimensional data with geospatial coordinates, to render data on the client. To understand the fundamentals of Torque.js, read the guides. To view the source code, browse the open-source repository in GitHub and contribute. Otherwise, view examples, read the full reference API, or find different support options.

Guides

Quick reference guides for learning how to use Torque.js features.

Reference

Browse the interactive API documentation to search for specific Torque.js methods, arguments, and sample code that can be used to build your applications.

Check Full Reference API 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Create new Torque Layer
var torqueLayer = new L.TorqueLayer({
  user: 'viz2',
  table: 'ow',
  cartocss: '<cartocss here>'
});

map.addLayer(torqueLayer);

// An event example to print the current step to the console log.

torqueLayer.on('change:steps', function(step) {
  // do something with step
  console.log('Current step is ' + step);
});

Examples

Play with real examples and learn by doing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<!DOCTYPE html>
<html>
  <head>
    <title>Static bubble map | 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" />
    <!--[if lte IE 8]>
      <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
    <![endif]-->
    <script type="sql/html" id="cartocss_template">
        Map { 
        -torque-frame-count:0.5; 
        -torque-animation-duration:0; 
        -torque-time-attribute:"cartodb_id"; 
        -torque-aggregation-function:"max(no2)"; 
        -torque-resolution:2; 
        -torque-data-aggregation:cumulative; 
        } 
        #aqi{
          comp-op: lighter;
          marker-fill-opacity: 0.9;
          marker-line-color: #FFF;
          marker-line-width: 1.5;
          marker-line-opacity: 1;
          marker-type: ellipse;
          marker-width: 30;
          marker-fill: #F84F40;
                [value < 50]{ 
                  marker-width: 24;
                  [value < 40]{ 
                    marker-width: 18;
                    [value < 30]{ 
                      marker-width: 12;
                      [value < 20]{ 
                        marker-width: 6;
                      [value < 10]{ 
                        marker-width: 3;
                      }
                      }
                    }
                  }
                }
        }

    </script>
  </head>
  <body>
    <div id="map"></div>
    
    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.uncompressed.js"></script>

    <script>
      function main() {
        var map = new L.Map('map', {
          zoomControl: false,
          center: [39.9304, 116.423239],
          zoom: 8
        });
        var layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{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",
          order: 1,
          options: {
            table_name: "harvard_aqi",
            user_name: "andrew",
            tile_style: $('#cartocss_template').html()
            }
        }, {
          https: true,
          tiler_protocol: 'https',
          tiler_port: 443
        }).done(function(layer) {
          map.addLayer(layer);
        });
      }

      // you could use $(window).load(main);
      window.onload = main;
    </script>
  </body>
</html>

Support

Get help or learn about known issues.