From def5a9e798bf102253c9dc4810f004370c0328f4 Mon Sep 17 00:00:00 2001 From: javi Date: Wed, 27 Nov 2013 11:06:48 +0100 Subject: [PATCH] updated readme example --- README.md | 93 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 49 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index 6cf906e..3f3e03d 100644 --- a/README.md +++ b/README.md @@ -24,51 +24,56 @@ The simplest way to use a visualization with Torque is...
Create a simple Torque visualization
``` javascript - ... - -
- - ... + ... + +
+ + ... + // define the torque layer style using cartocss + var CARTOCSS = [ + '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; ', + ' comp-op: "lighten";', + ' [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; }', + ' [frame-offset = 1] { marker-width: 10; marker-fill-opacity: 0.05;}', + ' [frame-offset = 2] { marker-width: 15; marker-fill-opacity: 0.02;}', + '}' + ].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: 'CartoDB' + }).addTo(map); + + var torqueLayer = new L.TorqueLayer({ + user : 'viz2', + table : 'ow', + cartocss: CARTOCSS + }); + torqueLayer.addTo(map); + torqueLayer.play() + ``` [Grab the complete example source code](https://github.com/CartoDB/torque/blob/master/examples/navy_leaflet.html)