Projecting a 3D route on Google Maps

With my WebGL route renderer package, you can now project the route on a Google Maps instance using a vector map.

I wrote the library with the intentions of providing very low-level controls, as the library itself is a very low-level package built on a WebGL context. The package itself does offer a standard context setup which includes default perspectives and projections.

Now, it also includes an adapter for the Google Maps WebGL Overlay View, which also provides direct access to the WebGL context.

In the WebGL Overlay View adapter, it uses the transformer provided through the Google Maps JS API to project the route to be precisely as it should, on the map.

Setting up the renderer

The package uses mathematical functions provided by the gl-matrix package, as such, this package must be loaded before using the route renderer:

To use the route renderer in a web environment, you can load it through any NPM supported package manager CDNs:

Then adding the WebGL Overlay View adapter is no more difficult than setting up a Google Maps WebGL Overlay View, the route renderer does return a WebGLOverlayView instance, and not a RouteWebGLOverlayView instance.

const webglOverlayView = new RouteRenderer.WebGLOverlayView(renderer, paths); webglOverlayView.setMap(map);

To avoid outdated information (and to avoid repeating myself), refer to the references located in the GitHub repository for information on initializing a renderer: RouteRenderer