torque/docs/examples/01-torque-interaction-methods.md

139 lines
3.5 KiB
Markdown
Raw Normal View History

## Advanced Torque.js Interaction Methods
2018-02-20 23:53:51 +08:00
### Torque Layers
2018-02-20 23:53:51 +08:00
While you can add multiple layers with Torque.js, this is not recommended as it effects performance.
#### Torque Layer Source Object (_type: 'torque'_)
2018-02-20 23:53:51 +08:00
This layer source object is used for Torque maps. Note that it does not allow sublayers.
##### Example
2018-02-20 23:53:51 +08:00
```javascript
{
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
2018-02-20 23:53:51 +08:00
Used to create an animated torque layer with customized settings.
```javascript
// 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]_)
2018-02-20 23:53:51 +08:00
##### Arguments
2018-02-20 23:53:51 +08:00
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
2018-02-20 23:53:51 +08:00
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_)
2018-02-20 23:53:51 +08:00
##### Arguments
2018-02-20 23:53:51 +08:00
Name | Description
--- | ---
`getValueForBBox(_xstart, ystart, xend, yend_)` | An accumulated numerical value from all the torque areas, within the specified bounds
##### Returns
2018-02-20 23:53:51 +08:00
Returns a number.
#### getActivePointsBBox(_step_)
2018-02-20 23:53:51 +08:00
##### Arguments
2018-02-20 23:53:51 +08:00
Name | Description
--- | ---
`getActivePointsBBox(_step_)` | The list of bounding boxes active for `step`
##### Returns
2018-02-20 23:53:51 +08:00
Returns a list of values.
#### invalidate()
2018-02-20 23:53:51 +08:00
##### Arguments
2018-02-20 23:53:51 +08:00
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
2018-02-20 23:53:51 +08:00
```javascript
<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);
}
});
```