no render when maker-width = 0 or opacity = 0

there was no way to avoid rendering in some conditions, with this patch the points are not rendered when marker-width or opacity is 0. Thin lines are also not rendered, this avoid to spend extra time rendering them when there are really thin and avoid a safari rendering bug (think lines are rendered wider than they should)

lib/torque/renderer/cartocss_render.js

@@ -3,6 +3,10 @@
   exports.torque = exports.torque || {};
 
   var TAU = Math.PI*2;
+  // 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; 
+
   function renderPoint(ctx, st) {
     ctx.fillStyle = st.fillStyle;
     var pixel_size = st['point-radius'];
@@ -22,7 +26,7 @@
 
     // stroke
     ctx.globalAlpha = 1.0;
-    if (st.strokeStyle && st.lineWidth) {
+    if (st.strokeStyle && st.lineWidth && st.lineWidth > LINEWIDTH_MIN_VALUE) {
       if (st.strokeOpacity) {
         ctx.globalAlpha = st.strokeOpacity;
       }

lib/torque/renderer/point.js

@@ -69,7 +69,11 @@
 
       var pointSize = st['point-radius'];
       if (!pointSize) {
-        throw new Error("marker-width property should be set");
+        return null;
+      }
+
+      if (st.fillOpacity === 0 && !st.strokeOpacity) {
+        return null;
       }
 
       var canvas = document.createElement('canvas');
@@ -143,12 +147,14 @@
           var c = tile.renderData[pixelIndex + p];
           if(c) {
            var sp = sprites[c];
-           if(!sp) {
+           if(sp === undefined) {
              sp = sprites[c] = this.generateSprite(shader, c, _.extend({ zoom: tile.z, 'frame-offset': frame_offset }, shaderVars));
            }
-           var x = tile.x[posIdx]- (sp.width >> 1);
-           var y = tileMax - tile.y[posIdx]; // flip mercator
-           ctx.drawImage(sp, x, y - (sp.height >> 1));
+           if (sp) {
+             var x = tile.x[posIdx]- (sp.width >> 1);
+             var y = tileMax - tile.y[posIdx]; // flip mercator
+             ctx.drawImage(sp, x, y - (sp.height >> 1));
+           }
           }
         }
       }

test/renderer/point.js

@@ -48,6 +48,44 @@ test('render conditional point layers', function() {
   equal(st['point-radius'], 20);
 });
 
+test('should generate sprite when maker-fill > 0', function() {
+  var css = [
+  '#test {',
+  '  marker-width: 10;',
+  '}'].join('\n');
+
+  renderer.setCartoCSS(css)
+  var layer = renderer._shader.getLayers()[0];
+  var sprite = renderer.generateSprite(layer, 0, { zoom: 0 })
+  notEqual(sprite, null);
+});
+
+
+test('should not generate sprite when maker-fill: 0', function() {
+  var css = [
+  '#test {',
+  '  marker-width: 0;',
+  '}'].join('\n');
+
+  renderer.setCartoCSS(css)
+  var layer = renderer._shader.getLayers()[0];
+  var sprite = renderer.generateSprite(layer, 0, { zoom: 0 })
+  equal(sprite, null);
+});
+
+test('should not generate sprite when maker-opacity: 0', function() {
+  var css = [
+  '#test {',
+  '  marker-width: 10;',
+  '  marker-opacity: 0;',
+  '}'].join('\n');
+
+  renderer.setCartoCSS(css)
+  var layer = renderer._shader.getLayers()[0];
+  var sprite = renderer.generateSprite(layer, 0, { zoom: 0 })
+  equal(sprite, null);
+});
+
 test('get value for position', function() {
   var mercator = new torque.Mercator();
   tile = {

test/suite.html

@@ -21,6 +21,7 @@
   <script src="../lib/torque/leaflet/canvas_layer.js"></script>
   <script src="../lib/torque/renderer/point.js"></script>
   <script src="../lib/torque/renderer/rectangle.js"></script>
+  <script src="../lib/torque/renderer/cartocss_render.js"></script>
   <script src="../lib/torque/provider.json.js"></script>
   <script src="../lib/torque/provider.windshaft.js"></script>
   <script src="../lib/torque/provider.jsonarray.js"></script>