Add a custom WebGL layer to Azure Maps

Enhancing your Azure Maps with a custom WebGL layer opens up a realm of possibilities for rendering dynamic 2D and 3D data. While Azure Maps provides a robust set of built-in features, there are times when you may require a more tailored solution. This is where the power of a custom WebGL layer shines.

WebGL, a cross-platform and royalty-free web standard, empowers you to harness low-level 3D graphics right in your web browser. By utilizing WebGL, Azure Maps gains a performance edge, surpassing the capabilities of standard HTML canvas rendering. However, it’s important to note that WebGL’s low-level nature adds complexity and may not always align with straightforward business solutions.

To bridge this gap, Azure Maps’ custom WebGL layer can be integrated with leading open-source 3D frameworks such as Babylon.js, Deck.gl, and Three.js. These frameworks simplify the management of 2D and 3D layers, making it more accessible to create high-performance, interactive graphics that come to life in real-time—ideal for simulations, data visualizations, animations, and 3D modeling.

To implement a custom WebGL layer, you’ll utilize the map.layer.add() function, passing in a new WebGLLayer. This layer requires a renderer object, which you’ll define by implementing the WebGLRenderer interface. You can also specify additional options, such as visibility at certain zoom levels:

1
2
3
4
5
6
7

// Add the layer to the map with layer options.
map.layers.add(new atlas.layer.WebGLLayer("layerId", {
    renderer: myRenderer,
    minZoom: 10,
    maxZoom: 22,
    visible: true
}));

Azure Maps operates on the Spherical Mercator projection (EPSG: 3857), a system that converts the spherical shape of the globe into a 2D map, stretching it at the poles for a square representation. The map’s camera matrix translates these Spherical Mercator coordinates into WebGL coordinates for your custom layer.

3D Frameworks

• Babylon.js: A comprehensive, real-time 3D engine developed by Microsoft, offering a user-friendly framework for game and rendering engine capabilities.
• Deck.gl: A WebGL-powered framework designed for the visual exploratory analysis of large datasets, allowing for the construction of intricate visualizations through layer composition.
• Three.js: A versatile, lightweight 3D library that’s easy to use across different web browsers.

For those eager to dive into developing their custom WebGL layer, extensive documentation is available, along with a plethora of samples showcasing the vast potential of Azure Maps. Explore these resources to kickstart your journey and unlock the full creative power of Azure Maps with custom WebGL layers.

This blog post was initially written by me for the Azure Maps Tech Blog.