Skip to content

Custom point size #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eastbayjake wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Custom point size #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a166afa
Feature: Add changePointSize for custom point display
eastbayjake Dec 3, 2015
104c210
Update docs
eastbayjake Dec 3, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
```
22 changes: 15 additions & 7 deletions WebGLLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down