caches isolines, improves performance

lib/torque/leaflet/torque.js

@@ -229,7 +229,6 @@ L.TorqueLayer = L.CanvasLayer.extend({
       }
       this.renderer.tileDimensions = {w: min.w.size, h: min.h.size};
       this.renderer.firstTileCoords = {coord: this._tiles[min.k].coord, pos:this.getTilePos(this._tiles[min.k].coord)};
-      ctx.setTransform(1, 0, 0, 1, this.renderer.firstTileCoords.pos.x, this.renderer.firstTileCoords.pos.y);
 
       var valsPerTile = 256/this.options.resolution;
       this.renderer.globalGrid = Array.apply(null, Array(this.renderer.tileDimensions.h * valsPerTile)).map(Number.prototype.valueOf,0);
@@ -250,14 +249,18 @@ L.TorqueLayer = L.CanvasLayer.extend({
           if (tile._tileCache) {
             // when the tile has a cached image just render it and avoid to render
             // all the points
-            //this.renderer._ctx.drawImage(tile._tileCache, 0, 0);
+            ctx.setTransform(1, 0, 0, 1, pos.x, pos.y);
+            this.renderer._ctx.drawImage(tile._tileCache, 0, 0);
           } else {
+            ctx.setTransform(1, 0, 0, 1, this.renderer.firstTileCoords.pos.x, this.renderer.firstTileCoords.pos.y);
             this.renderer.renderTile(tile, this.key, pos);
           }
         }
       }
+      if (!tile._tileCache){
         this.renderer.applyFilters();
       }
+    }
 
     // prepare caches if the animation is not running
     // don't cache if the key has just changed, this avoids to cache

lib/torque/renderer/point.js

@@ -5,6 +5,7 @@ var carto = global.carto || require('carto');
 var Filters = require('./torque_filters');
 var d3 = require('d3');
 var contour = require('./contour');
+var cSpline = require('cardinal-spline');
 
   var TAU = Math.PI * 2;
   var DEFAULT_CARTOCSS = [
@@ -200,14 +201,6 @@ var contour = require('./contour');
         */
       var isolines = true;
       if (isolines) {
-        function getRandomColor() {
-            var letters = '0123456789ABCDEF'.split('');
-            var color = '#';
-            for (var i = 0; i < 6; i++ ) {
-                color += letters[Math.floor(Math.random() * 16)];
-            }
-            return color;
-        }
         this._gridData(tile);
       }
       prof.end(true);
@@ -215,15 +208,18 @@ var contour = require('./contour');
 
     _gridData: function(tile){
       var valsPerTile = this.TILE_SIZE/this.options.resolution;
+      var difX = tile.coord.x - this.firstTileCoords.coord.x;
+      var difY = tile.coord.y - this.firstTileCoords.coord.y;
+      if (difX < 0 || difY < 0) return;
       // baseIndex is the distance to the upper left corner of the grid, in cells
       var baseIndex = {
-        x: (tile.coord.x - this.firstTileCoords.coord.x) * valsPerTile,
+        x: (difX) * valsPerTile,
-        y: (tile.coord.y - this.firstTileCoords.coord.y) * valsPerTile
+        y: (difY) * valsPerTile
       }
 
       for(var i = 0; i < tile.renderData.length; i++){
         var x = tile.x[i], y = tile.y[i];
-        this.globalGrid[baseIndex.y + (256 - y)/this.options.resolution-1][baseIndex.x + x/this.options.resolution] = tile.renderData[i];
+        this.globalGrid[baseIndex.y + (256 - y) / this.options.resolution -1][baseIndex.x + x/this.options.resolution] = tile.renderData[i];
       }
     },
 
@@ -236,27 +232,18 @@ var contour = require('./contour');
         }).join("");
       var type = parseInt(parsedCell, 2);
       var interpolated = true;
-      var N = interpolated?[this._lerp(cell[1], cell[0], contour), 0]: [0.5,0], 
+      var N = interpolated? [this._lerp(cell[1], cell[0], contour), 0]: [0.5,0], 
-          S = interpolated?[this._lerp(cell[2], cell[3], contour), 1]: [0.5,1], 
+          S = interpolated? [this._lerp(cell[2], cell[3], contour), 1]: [0.5,1], 
-          E = interpolated?[1, this._lerp(cell[2], cell[1], contour)]: [1,0.5], 
+          E = interpolated? [1, this._lerp(cell[2], cell[1], contour)]: [1,0.5], 
-          W = interpolated?[0, this._lerp(cell[3], cell[0], contour)]: [0,0.5]
+          W = interpolated? [0, this._lerp(cell[3], cell[0], contour)]: [0,0.5]
-      // Blank
       if (type === 0 || type === 15) return null;
-      // W - S
       if (type === 1 || type === 14) return [W, S]  
-      // S - E
       if (type === 2 || type === 13) return [S, E]
-      // W - E  
       if (type === 3 || type === 12) return [W, E]  
-      // N - E
       if (type === 4 || type === 11) return [N, E]  
-      // N - S
       if (type === 6 || type === 9) return [N, S]
-      // W - N
       if (type === 7 || type === 8) return [W, N] 
-      // W - N / S - E
       if (type === 5) return [W, N, S, E]
-      // W - S / N - E
       if (type === 10) return [W, S, N, E]
     },
 
@@ -387,55 +374,6 @@ var contour = require('./contour');
       }
   },
 
-  drawIsolines: function(){
-    if (this.globalGrid.length > 0) {
-      var style = this._shader.getLayers()[1].getStyle({}, {zoom: 2});
-      var cellsY = this.globalGrid.length-1;
-      var contourValues = [0, 4, 8, 16,  32, 64, 128];
-      var ctx = this._ctx;
-      var res = this.options.resolution;
-      var startPos = this.firstTileCoords.pos;
-      ctx.strokeStyle = style["-isoline-line-color"] || "black";
-      ctx.lineWidth = style["-isoline-line-width"] || 2;
-      ctx.globalAlpha = style["-isoline-line-opacity"] || 0.8;
-      var grad = style["-isoline-line-ramp"] && this._generateGradient(style["-isoline-line-ramp"].args);
-      for (var c = 0; c < contourValues.length; c++) {
-        if(style["-isoline-line-decay"]){
-          var max = contourValues[contourValues.length - 1];
-          ctx.globalAlpha = (contourValues[c]/max)*(style["-isoline-line-opacity"] || 0.8);
-        }
-        if(grad){
-          ctx.strokeStyle = "rgb("+grad[4*contourValues[c]+1]+","+grad[4*contourValues[c]+2]+","+grad[4*contourValues[c]+3]+")";
-        }
-        for (var y = 0;  y < cellsY; y++) {
-          for (var x = 0;  x < this.globalGrid[y].length-1; x++){
-            var currentCell = [
-            this.globalGrid[y][x],
-            this.globalGrid[y][x+1],
-            this.globalGrid[y+1][x+1],
-            this.globalGrid[y+1][x]
-            ];
-            var pipe = this._getPipe(currentCell, contourValues[c]);
-            if (pipe){
-              ctx.beginPath();
-              ctx.moveTo(res * (x + 0.5 + pipe[0][0]), res * (y + 0.5 + pipe[0][1]));
-              ctx.lineTo(res * (x + 0.5 + pipe[1][0]), res * (y + 0.5 + pipe[1][1]));
-              ctx.stroke();
-              if (pipe.length === 4){
-                ctx.beginPath();
-                ctx.moveTo(res * (x + 0.5 + pipe[2][0]), res * (y + 0.5 + pipe[2][1]));
-                ctx.lineTo(res * (x + 0.5 + pipe[3][0]), res * (y + 0.5 + pipe[3][1]));
-                ctx.stroke();
-              }
-            }
-
-          }
-        }
-      }
-      ctx.globalAlpha = 0;
-    }
-  },
-
   _generateGradient: function(ramp){
     var gradientCanvas = this._createCanvas(),
         gctx = gradientCanvas.getContext('2d'),