example file for vector field

dist/torque.full.uncompressed.js

@@ -4399,9 +4399,9 @@ var Profiler = require('../profiler');
 
 },{"../":10,"../profiler":17}],22:[function(require,module,exports){
   var TAU = Math.PI*2;
-  // min value to render a line. 
+  // min value to render a line.
   // it does not make sense to render a line of a width is not even visible
-  var LINEWIDTH_MIN_VALUE = 0.05; 
+  var LINEWIDTH_MIN_VALUE = 0.05;
   var MAX_SPRITE_RADIUS = 255;
 
   function renderPoint(ctx, st) {
@@ -4442,6 +4442,31 @@ var Profiler = require('../profiler');
     }
   }
 
+  function renderVector(ctx, st){
+      var angle = st['marker-angle']
+      var color = st['marker-stroke']
+      var mag   = st['marker-mag']
+      var max_mag   = st['marker-max-mag'] ?  st['marker-max-mag'] : 10
+      var max_line_length = st['marker-width']
+      console.log("trying ", angle, mag, max_mag, max_line_length )
+
+      var scaled_mag = (mag/max_mag)*max_line_length
+
+      ctx.lineWidth = 1
+
+      // ctx.strokeStyle='green'
+      // ctx.strokeRect(-max_line_length,-max_line_length,max_line_length*2,max_line_length*2)
+      ctx.translate(max_line_length/2.0, -max_line_length/2.0)
+      ctx.rotate(angle)
+      ctx.strokeStyle = color
+      ctx.moveTo(0,-max_line_length*2)
+      ctx.lineTo(0,max_line_length*2)
+      ctx.stroke();
+
+
+    }
+
+
   function renderRectangle(ctx, st) {
     ctx.fillStyle = st['marker-fill'];
     var pixel_size = st['marker-width'];
@@ -4487,6 +4512,7 @@ module.exports = {
     renderPoint: renderPoint,
     renderSprite: renderSprite,
     renderRectangle: renderRectangle,
+    renderVector: renderVector,
     MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
 };
 
@@ -4557,7 +4583,7 @@ var Filters = require('./torque_filters');
     this.TILE_SIZE = 256;
     this._style = null;
     this._gradients = {};
-    
+
     this._forcePoints = false;
   }
 
@@ -4594,6 +4620,7 @@ var Filters = require('./torque_filters');
 
     setShader: function(shader) {
       // clean sprites
+
       this._sprites = [];
       this._shader = shader;
       this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 });
@@ -4619,6 +4646,8 @@ var Filters = require('./torque_filters');
         this._style = st;
       }
 
+      console.log("VALUE IS ", value)
+
       var pointSize = st['marker-width'];
       if (!pointSize) {
         return null;
@@ -4655,7 +4684,10 @@ var Filters = require('./torque_filters');
         var mt = st['marker-type'];
         if (mt && mt === 'rectangle') {
           cartocss.renderRectangle(ctx, st);
-        } else {
+        } else if(mt && mt === 'vector') {
+          cartocss.renderVector(ctx,st);
+        }
+        else{
           cartocss.renderPoint(ctx, st);
         }
       }
@@ -4665,7 +4697,7 @@ var Filters = require('./torque_filters');
         i.src = canvas.toDataURL();
         return i;
       }
-      
+
       return canvas;
     },
 
@@ -4693,7 +4725,7 @@ var Filters = require('./torque_filters');
           }
         }
       }
-      
+
       prof.end(true);
 
       return callback && callback(null);
@@ -4737,7 +4769,7 @@ var Filters = require('./torque_filters');
     },
 
     //
-    // renders a tile in the canvas for key defined in 
+    // renders a tile in the canvas for key defined in
     // the torque tile
     //
     _renderTile: function(tile, key, frame_offset, sprites, shader, shaderVars) {
@@ -4774,7 +4806,7 @@ var Filters = require('./torque_filters');
           }
         }
       }
-      
+
 
       prof.end(true);
     },
@@ -4925,7 +4957,7 @@ var Filters = require('./torque_filters');
           }
           gradient = {};
           var colorize = this._style['image-filters'].args;
-          
+
           var increment = 1/colorize.length;
           for (var i = 0; i < colorize.length; i++){
             var key = increment * i + increment;
@@ -13932,7 +13964,7 @@ module.exports={
   "url": "https://github.com/cartodb/carto",
   "repository": {
     "type": "git",
-    "url": "http://github.com/cartodb/carto.git"
+    "url": "git+ssh://git@github.com/cartodb/carto.git"
   },
   "author": {
     "name": "CartoDB",
@@ -14003,7 +14035,7 @@ module.exports={
   "bugs": {
     "url": "https://github.com/cartodb/carto/issues"
   },
-  "homepage": "https://github.com/cartodb/carto",
+  "homepage": "https://github.com/cartodb/carto#readme",
   "_id": "carto@0.15.1-cdb1",
   "_shasum": "62534c2975cbee073f10c6c14a0c7e889c9469e7",
   "_resolved": "https://github.com/CartoDB/carto/archive/master.tar.gz",

dist/torque.uncompressed.js

@@ -4406,9 +4406,9 @@ var Profiler = require('../profiler');
 
 },{"../":10,"../profiler":17}],22:[function(require,module,exports){
   var TAU = Math.PI*2;
-  // min value to render a line. 
+  // min value to render a line.
   // it does not make sense to render a line of a width is not even visible
-  var LINEWIDTH_MIN_VALUE = 0.05; 
+  var LINEWIDTH_MIN_VALUE = 0.05;
   var MAX_SPRITE_RADIUS = 255;
 
   function renderPoint(ctx, st) {
@@ -4449,6 +4449,31 @@ var Profiler = require('../profiler');
     }
   }
 
+  function renderVector(ctx, st){
+      var angle = st['marker-angle']
+      var color = st['marker-stroke']
+      var mag   = st['marker-mag']
+      var max_mag   = st['marker-max-mag'] ?  st['marker-max-mag'] : 10
+      var max_line_length = st['marker-width']
+      console.log("trying ", angle, mag, max_mag, max_line_length )
+
+      var scaled_mag = (mag/max_mag)*max_line_length
+
+      ctx.lineWidth = 1
+
+      // ctx.strokeStyle='green'
+      // ctx.strokeRect(-max_line_length,-max_line_length,max_line_length*2,max_line_length*2)
+      ctx.translate(max_line_length/2.0, -max_line_length/2.0)
+      ctx.rotate(angle)
+      ctx.strokeStyle = color
+      ctx.moveTo(0,-max_line_length*2)
+      ctx.lineTo(0,max_line_length*2)
+      ctx.stroke();
+
+
+    }
+
+
   function renderRectangle(ctx, st) {
     ctx.fillStyle = st['marker-fill'];
     var pixel_size = st['marker-width'];
@@ -4494,6 +4519,7 @@ module.exports = {
     renderPoint: renderPoint,
     renderSprite: renderSprite,
     renderRectangle: renderRectangle,
+    renderVector: renderVector,
     MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
 };
 
@@ -4564,7 +4590,7 @@ var Filters = require('./torque_filters');
     this.TILE_SIZE = 256;
     this._style = null;
     this._gradients = {};
-    
+
     this._forcePoints = false;
   }
 
@@ -4601,6 +4627,7 @@ var Filters = require('./torque_filters');
 
     setShader: function(shader) {
       // clean sprites
+
       this._sprites = [];
       this._shader = shader;
       this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 });
@@ -4626,6 +4653,8 @@ var Filters = require('./torque_filters');
         this._style = st;
       }
 
+      console.log("VALUE IS ", value)
+
       var pointSize = st['marker-width'];
       if (!pointSize) {
         return null;
@@ -4662,7 +4691,10 @@ var Filters = require('./torque_filters');
         var mt = st['marker-type'];
         if (mt && mt === 'rectangle') {
           cartocss.renderRectangle(ctx, st);
-        } else {
+        } else if(mt && mt === 'vector') {
+          cartocss.renderVector(ctx,st);
+        }
+        else{
           cartocss.renderPoint(ctx, st);
         }
       }
@@ -4672,7 +4704,7 @@ var Filters = require('./torque_filters');
         i.src = canvas.toDataURL();
         return i;
       }
-      
+
       return canvas;
     },
 
@@ -4700,7 +4732,7 @@ var Filters = require('./torque_filters');
           }
         }
       }
-      
+
       prof.end(true);
 
       return callback && callback(null);
@@ -4744,7 +4776,7 @@ var Filters = require('./torque_filters');
     },
 
     //
-    // renders a tile in the canvas for key defined in 
+    // renders a tile in the canvas for key defined in
     // the torque tile
     //
     _renderTile: function(tile, key, frame_offset, sprites, shader, shaderVars) {
@@ -4781,7 +4813,7 @@ var Filters = require('./torque_filters');
           }
         }
       }
-      
+
 
       prof.end(true);
     },
@@ -4932,7 +4964,7 @@ var Filters = require('./torque_filters');
           }
           gradient = {};
           var colorize = this._style['image-filters'].args;
-          
+
           var increment = 1/colorize.length;
           for (var i = 0; i < colorize.length; i++){
             var key = increment * i + increment;

examples/vector_test.html

@@ -0,0 +1,81 @@
+
+<html>
+  <link rel="stylesheet" href="vendor/leaflet.css" />
+  <style>
+    #map, html, body {
+      width: 100%; height: 100%; padding: 0; margin: 0;
+    }
+    #title {
+      position: absolute;
+      top: 100px;
+      left: 50px;
+      color: white;
+      font-size: 27px;
+      font-family: Helvetica, sans-serif;
+    }
+  </style>
+  <body>
+    <div id="map"></div>
+    <div id="title">Average temperature collected by Britain's Royal Navy (1913-1925)</div>
+
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+    <script src="../dist/torque.full.uncompressed.js"></script>
+
+
+    <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-frame-count:1;',
+        '  -torque-animation-duration:1;',
+        '  -torque-time-attribute:"date";',
+        '  -torque-aggregation-function:"avg(angle*40)";',
+        '  -torque-resolution:4;',
+        '  -torque-data-aggregation:linear;',
+        '}',
+          '#wind {',
+          '  marker-width: 4;',
+          '  marker-fill-opacity: 1.0;',
+          '  marker-stroke: red; ',
+          '  marker-max-mag: 7; ',
+          '  marker-type: vector;',
+          '  marker-mag : 7;',
+          '}'
+
+      ]
+
+      for(var i=0 ; i  < 255; i++){
+        CARTOCSS.push('#wind[value <= '+(255-i)+'] { marker-angle:'+ (255-i)/40+'; marker-stroke: rgb('+i+','+(255-i)+',255); }')
+      }
+      console.log(CARTOCSS)
+
+      CARTOCSS = CARTOCSS.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       : 'stuartlynn',
+        table      : 'wind',
+        cartocss: CARTOCSS
+      });
+
+      torqueLayer.addTo(map);
+      torqueLayer.play();
+
+
+
+    </script>
+  </body>
+</html>

lib/torque/renderer/cartocss_render.js

@@ -1,7 +1,7 @@
   var TAU = Math.PI*2;
-  // min value to render a line. 
+  // min value to render a line.
   // it does not make sense to render a line of a width is not even visible
-  var LINEWIDTH_MIN_VALUE = 0.05; 
+  var LINEWIDTH_MIN_VALUE = 0.05;
   var MAX_SPRITE_RADIUS = 255;
 
   function renderPoint(ctx, st) {
@@ -42,6 +42,30 @@
     }
   }
 
+  function renderVector(ctx, st){
+      var angle = st['marker-angle']
+      var color = st['marker-stroke']
+      var mag   = st['marker-mag']
+      var max_mag   = st['marker-max-mag'] ?  st['marker-max-mag'] : 10
+      var max_line_length = st['marker-width']
+
+      var scaled_mag = (mag/max_mag)*max_line_length
+
+      ctx.lineWidth = 1
+
+      // ctx.strokeStyle='green'
+      // ctx.strokeRect(-max_line_length,-max_line_length,max_line_length*2,max_line_length*2)
+      ctx.translate(max_line_length/2.0, -max_line_length/2.0)
+      ctx.rotate(angle)
+      ctx.strokeStyle = color
+      ctx.moveTo(0,-max_line_length*2)
+      ctx.lineTo(0,max_line_length*2)
+      ctx.stroke();
+
+
+    }
+
+
   function renderRectangle(ctx, st) {
     ctx.fillStyle = st['marker-fill'];
     var pixel_size = st['marker-width'];
@@ -87,5 +111,6 @@ module.exports = {
     renderPoint: renderPoint,
     renderSprite: renderSprite,
     renderRectangle: renderRectangle,
+    renderVector: renderVector,
     MAX_SPRITE_RADIUS: MAX_SPRITE_RADIUS
 };

lib/torque/renderer/point.js

@@ -57,7 +57,7 @@ var Filters = require('./torque_filters');
     this.TILE_SIZE = 256;
     this._style = null;
     this._gradients = {};
-    
+
     this._forcePoints = false;
   }
 
@@ -94,6 +94,7 @@ var Filters = require('./torque_filters');
 
     setShader: function(shader) {
       // clean sprites
+
       this._sprites = [];
       this._shader = shader;
       this._Map = this._shader.getDefault().getStyle({}, { zoom: 0 });
@@ -155,7 +156,10 @@ var Filters = require('./torque_filters');
         var mt = st['marker-type'];
         if (mt && mt === 'rectangle') {
           cartocss.renderRectangle(ctx, st);
-        } else {
+        } else if(mt && mt === 'vector') {
+          cartocss.renderVector(ctx,st);
+        }
+        else{
           cartocss.renderPoint(ctx, st);
         }
       }
@@ -165,7 +169,7 @@ var Filters = require('./torque_filters');
         i.src = canvas.toDataURL();
         return i;
       }
-      
+
       return canvas;
     },
 
@@ -193,7 +197,7 @@ var Filters = require('./torque_filters');
           }
         }
       }
-      
+
       prof.end(true);
 
       return callback && callback(null);
@@ -237,7 +241,7 @@ var Filters = require('./torque_filters');
     },
 
     //
-    // renders a tile in the canvas for key defined in 
+    // renders a tile in the canvas for key defined in
     // the torque tile
     //
     _renderTile: function(tile, key, frame_offset, sprites, shader, shaderVars) {
@@ -274,7 +278,7 @@ var Filters = require('./torque_filters');
           }
         }
       }
-      
+
 
       prof.end(true);
     },
@@ -425,7 +429,7 @@ var Filters = require('./torque_filters');
           }
           gradient = {};
           var colorize = this._style['image-filters'].args;
-          
+
           var increment = 1/colorize.length;
           for (var i = 0; i < colorize.length; i++){
             var key = increment * i + increment;