diff --git a/lib/torque/renderer/point.js b/lib/torque/renderer/point.js index 68bfb51..fa359ca 100644 --- a/lib/torque/renderer/point.js +++ b/lib/torque/renderer/point.js @@ -61,6 +61,7 @@ var contour = require('./contour'); this._gradients = {}; this._forcePoints = false; + this.globalGrid = []; } torque.extend(PointRenderer.prototype, torque.Event, { @@ -175,6 +176,9 @@ var contour = require('./contour'); // renders all the layers (and frames for each layer) from cartocss // renderTile: function(tile, key, pos) { + if(tile && !this.firstTileCoords){ + this.firstTileCoords = tile.coord; + } if (this._iconsToLoad > 0) { this.on('allIconsLoaded', function() { this.renderTile.apply(this, [tile, key, callback]); @@ -287,30 +291,6 @@ var contour = require('./contour'); // ctx.fill(); // } // } - var cellsX = grid[0].length-1; - var cellsY = grid.length-1; - var contourValues = [0, 4, 8, 16]; - ctx.strokeStyle = "white"; - for(var c = 0; c < contourValues.length; c++){ - for (var y = 0; y < cellsY; y++){ - for (var x = 0; x < cellsX; x++){ - var currentCell = [grid[y][x], grid[y][x+1], grid[y+1][x+1], grid[y+1][x]]; - var pipe = this._getPipe(currentCell, contourValues[c]); - if (pipe){ - ctx.beginPath(); - ctx.moveTo(x * res + anchor + res * pipe[0][0], y * res + anchor + res * pipe[0][1]); - ctx.lineTo(x * res + anchor + res * pipe[1][0], y * res + anchor + res * pipe[1][1]); - ctx.stroke(); - if (pipe.length === 4){ - ctx.beginPath(); - ctx.moveTo(x * res + anchor + res * pipe[2][0], y * res + anchor + res * pipe[2][1]); - ctx.lineTo(x * res + anchor + res * pipe[3][0], y * res + anchor + res * pipe[3][1]); - ctx.stroke(); - } - } - } - } - } } // var pixelIndex = tile.timeIndex[key]; @@ -334,21 +314,23 @@ var contour = require('./contour'); }, _gridData: function(tile){ - var res = this.options.resolution; - var grid = new Array(256/res); - for(var i =0; i 0){ + for (var i = 0, c = 0; i < this.globalGrid.length; i++){ + if (this.globalGrid[i] && this.globalGrid[i].length > c){ + c = this.globalGrid[i].length; } - var gradient = this._gradients[gradientKey(this._style['image-filters'])]; - if(!gradient){ - function componentToHex(c) { - var hex = c.toString(16); - return hex.length == 1 ? "0" + hex : hex; + } + var cellsY = this.globalGrid.length-1; + var contourValues = [0, 4, 8, 16]; + var ctx = this._ctx; + var res = this.options.resolution; + var anchor = this.options.resolution/2; + ctx.strokeStyle = "white"; + for(var c = 0; c < contourValues.length; c++){ + for (var y = 0; y < cellsY; y++){ + if(this.globalGrid[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(x * res + anchor + res * pipe[0][0], y * res + anchor + res * pipe[0][1]); + ctx.lineTo(x * res + anchor + res * pipe[1][0], y * res + anchor + res * pipe[1][1]); + ctx.stroke(); + if (pipe.length === 4){ + ctx.beginPath(); + ctx.moveTo(x * res + anchor + res * pipe[2][0], y * res + anchor + res * pipe[2][1]); + ctx.lineTo(x * res + anchor + res * pipe[3][0], y * res + anchor + res * pipe[3][1]); + ctx.stroke(); + } + } + } } - - function rgbToHex(r, g, b) { - return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); - } - 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; - var rgb = colorize[i].rgb; - var formattedColor = rgbToHex(rgb[0], rgb[1], rgb[2]); - gradient[key] = formattedColor; - } - this._gradients[gradientKey(this._style['image-filters'])] = gradient; } - this._filters.gradient(gradient); - this._filters.draw(); } } - } + // if(this._style){ + // if(this._style['image-filters']){ + // function gradientKey(imf){ + // var hash = "" + // for(var i = 0; i < imf.args.length; i++){ + // var rgb = imf.args[i].rgb; + // hash += rgb[0] + ":" + rgb[1] + ":" + rgb[2]; + // } + // return hash; + // } + // var gradient = this._gradients[gradientKey(this._style['image-filters'])]; + // if(!gradient){ + // function componentToHex(c) { + // var hex = c.toString(16); + // return hex.length == 1 ? "0" + hex : hex; + // } + + // function rgbToHex(r, g, b) { + // return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); + // } + // 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; + // var rgb = colorize[i].rgb; + // var formattedColor = rgbToHex(rgb[0], rgb[1], rgb[2]); + // gradient[key] = formattedColor; + // } + // this._gradients[gradientKey(this._style['image-filters'])] = gradient; + // } + // this._filters.gradient(gradient); + // this._filters.draw(); + // } + // } + } });