diff --git a/docs/reference/07-style-methods.md b/docs/reference/07-style-methods.md new file mode 100644 index 0000000..37382d0 --- /dev/null +++ b/docs/reference/07-style-methods.md @@ -0,0 +1,33 @@ +### Style Methods + +Method | Options | Returns | Description +---|---|---|---| +`setCartoCSS(cartocss)` | `cartocss string` | `this` | style the map rendering using client-side CartoCSS (not available with [Named maps](https://carto.com/docs/carto-engine/maps-api/named-maps/)) + +Torque supports a limited subset of CartoCSS rules defined in the [torque-reference](https://github.com/cartodb/torque-reference). To see the full list of supported rules, read the [Torque CartoCSS documentation](https://carto.com/docs/carto-engine/cartocss/properties-for-torque/). `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:** +```css +/* 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; +} +```