Torque.js v2

Introduction

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

The contents described in this document are subject to CARTO’s Terms of Service

Versioning

Torque.js uses Semantic Versioning. View our Github repository to find tags for each release.

L.TorqueLayer

A layer to be added to a Leaflet map. It works as a regular tiled layer within the Leaflet tile pane, but instead of containing <img> elements, it’s composed of a single <canvas> where all markers are drawn.

Example:

1
2
3
4
5
6
7
var torqueLayer = new L.TorqueLayer({
  user: 'viz2',
  table: 'ow',
  cartocss: '<cartocss here>'
});

map.addLayer(torqueLayer);

Options

Using a CARTO table directly

Using a custom SQL query

Name | Description — | — query | A string object, the SQL query to be performed to fetch the data. Default value is null.

You must use this param or table, but not at the same time Tip: For a Torque category layer that is created dynamically with cartodb.createLayer, the SQL query must explicitly include how to build the torque_category column. You must include both the sql and table_name parameters. See this createLayer with torque category layer example.

Providing a TileJSON file

Add Comment

Time Methods

Note: Torque.js interprets the beginning and ending date/time from your “Time Column” as one block, then divides that up into Steps, depending on the number you set. It does not necessarily draw one frame for each row.

Layer Control Methods

Style Methods

Torque supports a limited subset of CartoCSS rules defined in the torque-reference. To see the full list of supported rules, read the Torque CartoCSS documentation. value and zoom variables can be used. value is the value of aggregation. zoom is the current zoom being rendered.

TorqueLayer currently expects marker styling.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* This is how a minimal example of a stylesheet for a Torque visualisation would look like. */

Map {
  -torque-time-attribute: "date";
  -torque-aggregation-function: "count(cartodb_id)";
  -torque-frame-count: 760;
  -torque-animation-duration: 15;
  -torque-resolution: 2;
}
#layer {
  marker-width: 3;
  marker-fill-opacity: 0.8;
  marker-fill: #FEE391; 
}
#layer[value = 4] { // Use of the value variable, generated by the function specified in -torque-aggregation-function
  marker-fill: #FABADA; 
}
#layer[zoom = 12] { // Use of the zoom variable
  marker-width: 10;
}

Data Methods

Example: ```js // SQL Example to limit the data used in the Torque map. torqueLayer.setSQL(“SELECT * FROM table LIMIT 100”);

Events

Events in Torque follow the format:

1
2
3
torqueLayer.on('event-type', function([callback_obj]) {
  // do something
});

Example:

1
2
3
4
5
6
// 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);
});

Google Maps Layers

GMapsTorqueLayer(options)

This class does exactly the same as L.TorqueLayer but using Google Maps instead. The main difference is that this class is not a layer but is an overlay, so in order to add it to the a map use, layer.setMap instead of overlayMapTypes. See the Overlay View reference in Google Maps API doc.

Options