torque/doc/API.md

107 lines
4.8 KiB
Markdown
Raw Normal View History

# Torque API
## L.TorqueLayer(options)
2013-08-21 05:33:15 +08:00
One of two core classes for the Torque library - it is used to create an animated torque layer with custom settings.
### Usage example
```js
// initialize a torque layer that uses the CartoDB account details and SQL API to pull in data
var torqueLayer = new L.TorqueLayer({
user : 'viz2',
table : 'ow',
2014-09-24 17:48:46 +08:00
cartocss: CARTOCSS
});
```
### Options
##### Provider options
| Option | type | Default | Description |
|-----------|:-----------|:----------|:---------------------------------------|
2014-09-24 17:48:46 +08:00
| provider | string | ```sql_api``` | Where is the data coming from |
2014-09-24 17:48:46 +08:00
##### CartoDB data options (SQL API provider)
| Option | type | Default | Description |
|-----------|:-----------|:----------|:---------------------------------------|
| user | string | ```null``` | CartoDB account name. Found as, accountname.cartodb.com|
2014-09-24 17:48:46 +08:00
| table | string | ```null``` | CartoDB table name where data is found |
| sql | string | ```null``` | SQL query to be performed to fetch the data. You must
use this param or table, not at the same time |
2013-08-28 18:45:07 +08:00
### Time methods
| Method | options | returns | Description |
|-----------|:-----------|:----------|:---------------------------------------|
2013-08-30 18:14:53 +08:00
| ```setStep(step)``` | ```time numeric``` | ```this``` | sets the animation to the step indicated by ```step```, must be between 0 and ```steps```|
2014-09-24 17:48:46 +08:00
| ```play()```| | ```this```| starts the animation
| ```stop()```| | ```this```| stops the animation and set time to step 0
| ```pause()```| | ```this```| stops the animation but keep the current time (play enables the animation again)
| ```toggle()```| | ```this```| toggles (pause/play) the animation
| ```getStep()``` | | current animation step (integer) | gets the current animation step
| ```getTime()``` | | current animation time (Date) | gets the real animation time
2013-08-21 05:33:15 +08:00
2013-08-28 18:45:07 +08:00
### Style methods
2013-08-21 05:33:15 +08:00
| Method | options | returns | Description |
|-----------|:-----------|:----------|:---------------------------------------|
| ```setCartoCSS(cartocss)``` | ```cartocss string``` | ```this``` | style the map rendering using client-side cartocss |
2013-08-21 05:33:15 +08:00
The full CartoCSS spec is not supported by Torque but instead only a limited subset with some additions related to torque rendering. To see the full list of supported parameters, read the [Torque CartoCSS documentation here](CartoCSS.md). ``value`` and ``zoom`` variables can be used. ``value`` is the value of aggregation (see ``countby`` constructor option). ``zoom`` is the current zoom being rendered
2013-08-21 05:33:15 +08:00
TorqueLayer currently expects ```marker``` styling
##### CartoCSS Example
2013-08-21 05:34:53 +08:00
This should be ```string``` encoded in Javascript
2013-08-21 05:34:05 +08:00
```css
#layer {,
marker-fill: #662506;
marker-width: 20;
[value > 1] { marker-fill: #FEE391; }
[value > 2] { marker-fill: #FEC44F; }
[value > 3] { marker-fill: #FE9929; }
[value > 4] { marker-fill: #EC7014; }
[value > 5] { marker-fill: #CC4C02; }
[value > 6] { marker-fill: #993404; }
[value > 7] { marker-fill: #662506; }
2013-08-28 18:45:07 +08:00
[frame-offset = 1] { marker-width: 20; marker-fill-opacity: 0.05;}', // renders the previos frame
[frame-offset = 2] { marker-fill: red; marker-width: 30; marker-fill-opacity: 0.02;}', // renders two frames ago from the current being rendered
2013-08-21 05:34:05 +08:00
}
```
2014-09-24 17:48:46 +08:00
### Interaction methods (only available for Leaflet)
2013-08-21 05:33:15 +08:00
| Method | options | returns | Description |
|-----------|:-----------|:----------|:---------------------------------------|
2014-09-24 17:48:46 +08:00
| ```getValueForPos(x, y[, step])```| | an object like { bbox:[], value: VALUE } if there is value
for the pos, null otherwise | allows to get the value for the coordinate (in map reference system)
for a concrete step. If step is not specified the animation one is used. This method is expensive
in terms of CPU so be careful. It returns the value from the raster data not the rendered data |
2014-09-24 17:48:46 +08:00
| ```getActivePointsBBox(step)```| | list of bbox | returns the list of bounding boxes active for
``step``
2013-08-21 05:33:15 +08:00
2013-08-23 00:16:22 +08:00
# Google Maps Layers
2013-09-02 23:26:07 +08:00
## GMapsTorqueLayer(options)
This class does exactly the same than ``L.TorqueLayer`` but using Google Maps. The main difference is that this class
is not a layer is a overlay so in order to add it to the map use ``layer.setMap`` instead of ``overlayMapTypes``. See [Overlay view](https://developers.google.com/maps/documentation/javascript/reference#OverlayView) reference in Google Maps API doc.
### Options
2013-09-02 23:40:18 +08:00
##### options
2013-09-02 23:26:07 +08:00
| Option | type | Default | Description |
|-----------|:-----------|:----------|:---------------------------------------|
| map | google.maps.Map | | google.maps.Map instance |
see ``L.TorqueLayer`` for the rest of the options.