Skip to content

Instantly share code, notes, and snippets.

@geraldstanje geraldstanje/print4.html
Last active Apr 27, 2016

Embed
What would you like to do?
%html{:lang => "en", "ng-app" => "myApp"}
%head
%script{:src => "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"}
%script{:src => "https://maps.googleapis.com/maps/api/js?v=3.6&?key=AIzaSyAkyvfxLRt8uJ3gZlduH38ZQSF30_5N9cA&sensor=true"}
%script{:src => "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"}
%meta{:charset => "utf-8"}/
%title My AngularJS App
%body
.container-fluid
.row
.col-md-2
 
.col-md-8{style: "padding: 20px;"}
.col-md-12{style: "background-color:rgba(86,61,124,.15);padding-bottom: 10px;padding-top: 10px;border-radius: 10px;font-size:16px"}
%p
Webgl picking data points with readPixels from a google map using an offscreen buffer.
%p
%strong
Mouseover
a point for the city name.
%p
References:
= succeed ',' do
%a{href: 'http://build-failed.blogspot.com/2013/02/displaying-webgl-data-on-google-maps.html'} Displaying WebGL data on Google Maps
= succeed ',' do
%a{href: 'https://www.youtube.com/watch?v=aZJnI6hxr-c'} Google Maps + HTML5 + Spatial Data Visualization
Chaper 8 of
%a{href: 'https://www.packtpub.com/game-development/webgl-beginners-guide'}WebGL Beginner's Guide
.col-md-2
 
%script#pointVertexShader{:type => "x-shader/x-vertex"}
attribute vec4 worldCoord;
attribute vec4 color;
attribute float aPointSize;
varying vec4 vColor;
uniform mat4 mapMatrix;
void main() {
\// transform world coordinate by matrix uniform variable
gl_Position = mapMatrix * worldCoord;
vColor = color;
gl_PointSize = aPointSize;
}
%script#pointFragmentShader{:type => "x-shader/x-fragment"}
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
%div{"ng-controller" => "myCtrl"}
#map{map: ''}
#infoWindow{style:'position:absolute;background-color:yellow;display:none;width:130px;height:20px;z-index:1;'}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.