While you can add multiple layers with Torque.js, this is not recommended as it effects performance.
This layer source object is used for Torque maps. Note that it does not allow sublayers.
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
}
}
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
});
| 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 |
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.
| Name | Description |
|---|---|
getValueForBBox(_xstart, ystart, xend, yend_) |
An accumulated numerical value from all the torque areas, within the specified bounds |
Returns a number.
| Name | Description |
|---|---|
getActivePointsBBox(_step_) |
The list of bounding boxes active for step |
Returns a list of values.
| 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.
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);
}
});