diff --git a/lib/torque/renderer/cartocss_render.js b/lib/torque/renderer/cartocss_render.js index 3d00f9a..2b2ed64 100644 --- a/lib/torque/renderer/cartocss_render.js +++ b/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; } diff --git a/lib/torque/renderer/point.js b/lib/torque/renderer/point.js index 068ae96..c4dc2d9 100644 --- a/lib/torque/renderer/point.js +++ b/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)); + } } } } diff --git a/test/renderer/point.js b/test/renderer/point.js index 6cf8ad0..14b15a9 100644 --- a/test/renderer/point.js +++ b/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 = { diff --git a/test/suite.html b/test/suite.html index 1711d38..143059a 100644 --- a/test/suite.html +++ b/test/suite.html @@ -21,6 +21,7 @@ +