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

Advanced Torque.js Interaction Methods

Torque Layers

While you can add multiple layers with Torque.js, this is not recommended as it effects performance.

Torque Layer Source Object (type: ‘torque’)

This layer source object is used for Torque maps. Note that it does not allow sublayers.

Example
1
2
3
4
5
6
7
8
9
10

{
  type: 'torque', // Required
  order: 1, // Optional
  options: {
    query: "SQL statement",   // Required if table_name is not given
    table_name: "table_name",   // Required if query is not given
    user_name: "your_user_name", // Required
    cartocss: "CartoCSS styles" // Required
  }
}

Interaction Methods for a Torque Layer

Used to create an animated torque layer with customized settings.

1
2
3
4
5
6

// initialize a torque layer that uses the CARTO account details and SQL API to pull in data
var torqueLayer = new L.TorqueLayer({
  user : 'viz2',
  table : 'ow',
  cartocss: CARTOCSS
});

getValueForPos(x, y[, step])

Arguments
Name Description
getValueForPos(_x, y[, step]_) Allows to get the value for the coordinate (in map reference system) for a concrete step. If a step is not specified, the animation step is used. Use caution, as this method increases CPU usage
Returns

An object, such as a { bbox:[], value: VALUE } if there is value for the pos, otherwise, it is null. It returns the value from the raster data, not the rendered data.

getValueForBBox(xstart, ystart, xend, yend)

Arguments
Name Description
getValueForBBox(_xstart, ystart, xend, yend_) An accumulated numerical value from all the torque areas, within the specified bounds
Returns

Returns a number.

getActivePointsBBox(step)

Arguments
Name Description
getActivePointsBBox(_step_) The list of bounding boxes active for step
Returns

Returns a list of values.

invalidate()

Arguments
Name Description
invalidate() Forces a reload of the layer data

Tip: All of these interaction methods are available for Google Map layers, with the exception of invalidate.

Example of Interaction Methods for a Torque Layer
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

<script>
// define the torque layer style using cartocss
// this creates a kind of density map
// color scale from http://colorbrewer2.org/
var CARTOCSS = [
  'Map {',
  '-torque-time-attribute: "date";',
  '-torque-aggregation-function: "avg(temp::float)";',
  '-torque-frame-count: 1;',
  '-torque-animation-duration: 15;',
  '-torque-resolution: 16',
  '}',
  '#layer {',
  '  marker-width: 8;',
  '  marker-fill-opacity: 1.0;',
  '  marker-fill: #fff5eb; ',
  '  marker-type: rectangle;',
  '  [value > 1] { marker-fill: #fee6ce; }',
  '  [value > 2] { marker-fill: #fdd0a2; }',
  '  [value > 4] { marker-fill: #fdae6b; }',
  '  [value > 10] { marker-fill: #fd8d3c; }',
  '  [value > 15] { marker-fill: #f16913; }',
  '  [value > 20] { marker-fill: #d94801; }',
  '  [value > 25] { marker-fill: #8c2d04; }',
  '}'
].join('\n');

var map = new L.Map('map', {
  zoomControl: true,
  center: [40, 0],
  zoom: 3
});
L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
  attribution: 'CARTO'
}).addTo(map);
var torqueLayer = new L.TorqueLayer({
  user : 'viz2',
  table : 'ow',
  cartocss: CARTOCSS
});
torqueLayer.addTo(map);
map.on('click', function(e) {
  var p = e.containerPoint
  var value = torqueLayer.getValueForPos(p.x, p.y);
  if (value !== null) {
    map.openPopup('average temperature: ' + value.value + "C", e.latlng);
  }
});