When developing with Azure Maps, in many cases, most of the functionality you need is available out of the box, but sometimes you need something special. For example, when you want to render 2D or 3D data on top of a map and the built-in functionality is not exciting enough, the custom WebGL layer is an amazing option. WebGL is a cross-platform, royalty-free, open web standard for leveraging low-level 3D graphics in your browser. Azure Maps uses WebGL to render the map to get a significant benefit to performance over drawing directly on the standard HTML canvas. However, be aware that because WebGL is a low-level programming model, it can be highly complex and is not always the best choice if you try to solve a business requirement. Luckily, the Azure Maps custom WebGL layer can be combined with powerful open-source 3D frameworks, like Babylon.js, Deck.gl, Three.js, and more, which makes it easier to handle 2D and 3D layers on the map. With WebGL you can build high-performance interactive graphics that render in the browser in real-time, supporting enticing scenarios like simulations, data visualization, animations, and 3D modeling.
To add the custom WebGL layer to the map, use the default map.layer.add() function to pass a new WebGLLayer layer. The WebGL layer needs a renderer object to handle custom drawings on the map, this is done by implementing the WebGLRenderer interface on the renderer object. Additionally, you can pass some extra options, like on what zoom levels the custom layer should be visible or not.
// 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 use the Spherical Mercator projection coordinate system (EPSG: 3857). This projection is a mathematical model that transforms the spherical globe into a flat map. The Spherical Mercator projection stretches the map at the poles to create a square map. The map's camera matrix is used to translate Spherical Mercator points to WebGL coordinates used in the custom WebGL layer.
Babylon.js
Babylon.js is a powerful, simple, real-time 3D and open game and rendering engine packed into a friendly framework, which Microsoft initially developed.
Deck.gl
Deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets. deck.gl allows complex visualizations to be constructed by composing existing layers and makes it easy to package and share new visualizations as reusable layers.
Three.js
Three.js is an easy-to-use, lightweight, cross-browser, general-purpose 3D library.
To get started developing your custom WebGL layer, read our documentation or visit our samples site to see all of the great things you can do with Azure Maps.
Microsoft
