fixed rendering with cartocss with conditional zoom fixes #27

lib/torque/gmaps/torque.js

@@ -89,6 +89,11 @@ GMapsTorqueLayer.prototype = _.extend({},
     this.provider = new this.providers[this.options.provider](this.options);
     this.renderer = new this.renderers[this.options.renderer](this.getCanvas(), this.options);
 
+    // this listener should be before tile loader
+    this._cacheListener = google.maps.event.addListener(this.options.map, 'zoom_changed', function() {
+      self.renderer && self.renderer.clearSpriteCache();
+    });
+
     this._initTileLoader(this.options.map, this.getProjection());
 
     if (this.shader) {
@@ -149,6 +154,8 @@ GMapsTorqueLayer.prototype = _.extend({},
   onTileAdded: function(t) {
     var self = this;
     this.provider.getTileData(t, t.zoom, function(tileData) {
+      // don't load tiles that are not being shown
+      if (t.zoom !== self.options.map.getZoom()) return;
       self._tileLoaded(t, tileData);
       if (tileData) {
         self.redraw();
@@ -266,6 +273,7 @@ GMapsTorqueLayer.prototype = _.extend({},
     CanvasLayer.prototype.onRemove.call(this);
     this.animator.stop();
     this._removeTileLoader();
+    google.maps.event.removeListener(this._cacheListener);
   }
 
 });

lib/torque/leaflet/torque.js

@@ -69,6 +69,8 @@ L.TorqueLayer = L.CanvasLayer.extend({
     // for each tile shown on the map request the data
     this.on('tileAdded', function(t) {
       var tileData = this.provider.getTileData(t, t.zoom, function(tileData) {
+        // don't load tiles that are not being shown
+        if (t.zoom !== self._map.getZoom()) return;
         self._tileLoaded(t, tileData);
         if (tileData) {
           self.redraw();
@@ -79,9 +81,22 @@ L.TorqueLayer = L.CanvasLayer.extend({
 
   },
 
+  _clearCaches: function() {
+    this.renderer && this.renderer.clearSpriteCache();
+  },
+
+  onAdd: function (map) {
+    map.on({
+      'zoomend': this._clearCaches
+    }, this);
+    L.CanvasLayer.prototype.onAdd.call(this, map);
+  },
 
   onRemove: function(map) {
     this._removeTileLoader();
+    map.off({
+      'zoomend': this._clearCaches
+    }, this);
     L.CanvasLayer.prototype.onRemove.call(this, map);
   },
 

lib/torque/renderer/point.js

@@ -53,10 +53,15 @@
       this._shader = shader;
     },
 
+    clearSpriteCache: function() {
+      this._sprites = [];
+    },
+
     //
     // generate sprite based on cartocss style
     //
     generateSprite: function(shader, value, shaderVars) {
+      console.log("generate sprite", shaderVars);
       var prof = Profiler.metric('PointRenderer:generateSprite').start();
       var st = shader.getStyle('canvas-2d', {
         value: value

test/renderer/point.js

@@ -30,3 +30,20 @@ test('render shader layers', function() {
   renderer.renderTile(null, 0);
   equal(count, 1);
 });
+
+test('render conditional point layers', function() {
+  var css = [
+  '#test {',
+  'marker-width: 10;',
+  '[zoom = 18] {',
+    'marker-width: 20;',
+  '}}'].join('\n');
+
+  renderer.setCartoCSS(css)
+
+  var layer = renderer._shader.getLayers()[0];
+  var st = layer.getStyle('canvas-2d', {}, { zoom: 10, 'frame-offset': 0 });
+  equal(st['point-radius'], 10);
+  st = layer.getStyle('canvas-2d', {}, { zoom: 18, 'frame-offset': 0 });
+  equal(st['point-radius'], 20);
+});