CODEWITHSUNDEEP
google-mapsthree.jswebgl
Linus
Linus

Reputation: 845

google maps using three.js and webgl

I have thousands of points that need to be plotted on google maps and got a very responsive maps using the example from https://github.com/ubilabs/google-maps-api-threejs-layer . Did anyone have a play at this and wondering if it is possible to have different colored markers and possible marker click events?

Appreciate any pointers or examples online.

Upvotes: 4

Views: 18478

Answers (4)

Justin Poehnelt
Justin Poehnelt

Reputation: 3459

Updates for 2021!!

Google Maps JS now has a WebglOverlayView class and exposes the WebGL context.

const webglOverlayView = new google.maps.WebglOverlayView();

webglOverlayView.onAdd = () => {
  // Do setup that does not require access to rendering context.
}

webglOverlayView.onContextRestored = gl => {
  // Do setup that requires access to rendering context before onDraw call.
}

webglOverlayView.onDraw = (gl, coordinateTransformer) => {
  // Render objects.
}

webglOverlayView.onContextLost = () => {
  // Clean up pre-existing GL state.
}

webglOverlayView.onRemove = () => {
  // Remove all intermediate objects.
}

webglOverlayView.setMap(map);

Additionally, @googlemaps/three extends this class for easier use with ThreeJS.

// instantiate a ThreeJS Scene
const scene = new Scene();

// Create a box mesh
const box = new Mesh(
  new BoxBufferGeometry(10, 50, 10),
  new MeshNormalMaterial(),
);

// set position at center of map
box.position.copy(latLngToVector3(mapOptions.center));
// set position vertically
box.position.setY(25);

// add box mesh to the scene
scene.add(box);

// instantiate the ThreeJS Overlay with the scene and map
new ThreeJSOverlayView({
  scene,
  map,
});

Upvotes: 2

Mike Fabrikant
Mike Fabrikant

Reputation: 402

Millions of clickable data points can be painted on a google map using webgl.

A data point is represented by an x,y pair for a location on the canvas, an int for size, an off screen color, and an on screen color. These values are stored in separate typed arrays.

Each data point has a unique rgb color to act as a key in a lookup table of data point ids.

Create a texture to store the off screen colors and render it to an off screen buffer. On event, load the off screen buffer and use glReadPixels to retrieve the rgb color of the pixel clicked and then find the id in the lookup table. Points on the on screen buffer, what the user sees, can share a common color.

canvas.addEventListener('click', function(ev) {
  # insert code to get mouse x,y position on canvas
  pixels = new Uint8Array(4);
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  if (colorToId[pixels[0] + " " + pixels[1] + " " + pixels[2]]) {
    # Pixel clicked is a data point on the map
  }
});

Webgl code is lengthy, so only the click event is included.

Here is a live demo and a repo. (angular and coffeescript)

Here is a second example using plain js: webgl-picking-geo-polygons

Here is react-webgl-leaflet

The solution is based on Brendan Kenny's Google Maps + HTML5 + Spatial Data Visualization which explains some of the code in the excerpt above at the 30 min mark, and Displaying WebGL data on Google Maps.

The demo features less than ten data points, but you can just as easily paint over 16 million pickable data points using all combinations of rgb values.

Upvotes: 4

ddeloy
ddeloy

Reputation: 27

Here is a link to a jQuery/google map app. Not exactly what you are looking for; however you might find the example useful. Feel free to use - it can be downloaded from my site.

Link to app on my website

Click here to download the zip

Upvotes: 0

ddeloy
ddeloy

Reputation: 27

I discovered OpenLayers this past week. Very, very impressive framework. I would strongly suggest taking a look at it. OpenLayers.org is an open source JavaScript web mapping library distinguished from other alternatives, like Leaflet or Google Maps APIs, because of its huge set of components.

I spent the entire weekend creating sample apps by integrating OpenLayers with API's such as MapBox, WebGL etc... After all was said and done, I was extremely impressed with OpenLayers - and I plan to make use of OpenLayers in an upcoming POC/Project.


Here is a link to my test harness. From there you can also download the code for all of the examples, too.

Upvotes: 1

Related Questions