diff --git a/README.md b/README.md index c500c46..33cbda8 100644 --- a/README.md +++ b/README.md @@ -112,4 +112,6 @@ You can then run powerful queries on the data and use the index property on the var result = ... //Query result. var idx = result.properties.index; myLayer.changePointColor(idx, [0., 0., 1.]); //Change color to blue +myLayer.changePointSize(4); +myLayer.start(); ``` \ No newline at end of file diff --git a/WebGLLayer.js b/WebGLLayer.js index b63e765..2ec14a6 100644 --- a/WebGLLayer.js +++ b/WebGLLayer.js @@ -168,22 +168,23 @@ WebGLLayer.DEFAULT_POINT_FRAG_SHADER_ = [ * Default vertex shader source. * @private {string} */ -WebGLLayer.DEFAULT_POINT_VERT_SHADER_ = [ +WebGLLayer.vertShaderConfig_ = function(size){ + size = size || 2; + return [ 'precision mediump float;', - 'attribute vec4 worldCoord;', 'attribute float aColor;', - 'uniform mat4 mapMatrix;', - 'varying mediump float vColor;', - 'void main() {', ' gl_Position = mapMatrix * worldCoord;', - ' gl_PointSize = 2.;', + ' gl_PointSize = ' + size + '.;', ' vColor = aColor;', '}' -].join('\n'); + ].join('\n'); +} + +WebGLLayer.DEFAULT_POINT_VERT_SHADER_ = WebGLLayer.vertShaderConfig_(2); /** * Converts from latitude to vertical world coordinate. @@ -369,6 +370,13 @@ WebGLLayer.prototype.changePointColor = function(idx, color){ this.scheduleUpdate(); } +WebGLLayer.prototype.changePointSize = function(size){ + if (typeof size !== 'number') return console.log("Error: customPointSize expects number input"); + + WebGLLayer.DEFAULT_POINT_VERT_SHADER_ = WebGLLayer.vertShaderConfig_(size); + this.pointProgram_ = new ShaderProgram(this.gl_, WebGLLayer.DEFAULT_POINT_VERT_SHADER_, WebGLLayer.DEFAULT_POINT_FRAG_SHADER_); +} + /** * Changes the color value assigned to a given polygon in the features arrray. * @param {Number} idxStart