Skip to content

Commit 40ec147

Browse files
v-regandownerv-regandowner
authored
Merge pull request #248082 from stevemunk/web-sdk-3
Web SDK 3 info to Use the Azure Maps map control
2 parents 8553806 + c80a469 commit 40ec147

File tree

2 files changed

+169
-1
lines changed

2 files changed

+169
-1
lines changed

‎articles/azure-maps/how-to-use-map-control.md

Lines changed: 169 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ The Azure Maps Web SDK provides a [Map Control] that enables the customization o
1717

1818
This article uses the Azure Maps Web SDK, however the Azure Maps services work with any map control. For a list of third-party map control plug-ins, see [Azure Maps community - Open-source projects].
1919

20+
> [!IMPORTANT]
21+
> If you have existing applications incorporating Azure Maps using version 2 of the [Map Control], it is recomended to start using version 3. Version 3 is backwards compatible and has several benifits including [WebGL 2 Compatibility], increased performance and support for [3D terrain tiles].
22+
2023
## Prerequisites
2124

2225
To use the Map Control in a web page, you must have one of the following prerequisites:
@@ -228,6 +231,168 @@ Here's an example of Azure Maps with the language set to "fr-FR" and the regiona
228231

229232
For a list of supported languages and regional views, see [Localization support in Azure Maps].
230233

234+
## WebGL 2 Compatibility
235+
236+
Beginning with Azure Maps Web SDK 3.0, the Web SDK includes full compatibility with [WebGL 2], a powerful graphics technology that enables hardware-accelerated rendering in modern web browsers. By using WebGL 2, developers can harness the capabilities of modern GPUs to render complex maps and visualizations more efficiently, resulting in improved performance and visual quality.
237+
238+
![Map image showing WebGL 2 Compatibility.](./media/how-to-use-map-control/webgl-2-compatability.png)
239+
240+
```html
241+
<!DOCTYPE html>
242+
<html lang="en">
243+
<head>
244+
<meta charset="utf-8" />
245+
<meta name="viewport" content="width=device-width, user-scalable=no" />
246+
<title>WebGL2 - Azure Maps Web SDK Samples</title>
247+
<link href=https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css rel="stylesheet"/>
248+
<script src=https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js></script>
249+
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
250+
<style>
251+
html,
252+
body {
253+
width: 100%;
254+
height: 100%;
255+
padding: 0;
256+
margin: 0;
257+
}
258+
#map {
259+
width: 100%;
260+
height: 100%;
261+
}
262+
</style>
263+
</head>
264+
<body>
265+
<div id="map"></div>
266+
<script>
267+
var map = new atlas.Map("map", {
268+
center: [-122.44, 37.75],
269+
bearing: 36,
270+
pitch: 45,
271+
zoom: 12,
272+
style: "grayscale_light",
273+
// Get an Azure Maps key at https://azuremaps.com/.
274+
authOptions: {
275+
authType: "subscriptionKey",
276+
subscriptionKey: " <Your Azure Maps Key> "
277+
}
278+
});
279+
280+
// Wait until the map resources are ready.
281+
map.events.add("ready", (event) => {
282+
// Create a custom layer to render data points using deck.gl
283+
map.layers.add(
284+
new DeckGLLayer({
285+
id: "grid-layer",
286+
data: "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json",
287+
cellSize: 200,
288+
extruded: true,
289+
elevationScale: 4,
290+
getPosition: (d) => d.COORDINATES,
291+
// GPUGridLayer leverages WebGL2 to perform aggregation on the GPU.
292+
// For more details, see https://deck.gl/docs/api-reference/aggregation-layers/gpu-grid-layer
293+
type: deck.GPUGridLayer
294+
})
295+
);
296+
});
297+
298+
// A custom implementation of WebGLLayer
299+
class DeckGLLayer extends atlas.layer.WebGLLayer {
300+
constructor(options) {
301+
super(options.id);
302+
// Create an instance of deck.gl MapboxLayer which is compatible with Azure Maps
303+
// https://deck.gl/docs/api-reference/mapbox/mapbox-layer
304+
this._mbLayer = new deck.MapboxLayer(options);
305+
306+
// Create a renderer
307+
const renderer = {
308+
renderingMode: "3d",
309+
onAdd: (map, gl) => {
310+
this._mbLayer.onAdd?.(map["map"], gl);
311+
},
312+
onRemove: (map, gl) => {
313+
this._mbLayer.onRemove?.(map["map"], gl);
314+
},
315+
prerender: (gl, matrix) => {
316+
this._mbLayer.prerender?.(gl, matrix);
317+
},
318+
render: (gl, matrix) => {
319+
this._mbLayer.render(gl, matrix);
320+
}
321+
};
322+
this.setOptions({ renderer });
323+
}
324+
}
325+
</script>
326+
</body>
327+
</html>
328+
```
329+
330+
## 3D terrain tiles
331+
332+
Beginning with Azure Maps Web SDK 3.0, developers can take advantage of 3D terrain visualizations. This feature allows you to incorporate elevation data into your maps, creating a more immersive experience for your users. Whether it's visualizing mountain ranges, valleys, or other geographical features, the 3D terrain support brings a new level of realism to your mapping applications.
333+
334+
The following code example demonstrates how to implement 3D terrain tiles.
335+
336+
```html
337+
<!DOCTYPE html>
338+
<html lang="en">
339+
<head>
340+
<meta charset="utf-8" />
341+
<meta name="viewport" content="width=device-width, user-scalable=no" />
342+
<title>Elevation - Azure Maps Web SDK Samples</title>
343+
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css rel="stylesheet" />
344+
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js></script>
345+
<style>
346+
html,
347+
body {
348+
width: 100%;
349+
height: 100%;
350+
padding: 0;
351+
margin: 0;
352+
}
353+
#map {
354+
width: 100%;
355+
height: 100%;
356+
}
357+
</style>
358+
</head>
359+
360+
<body>
361+
<div id="map"></div>
362+
<script>
363+
var map = new atlas.Map("map", {
364+
center: [-121.7269, 46.8799],
365+
maxPitch: 85,
366+
pitch: 60,
367+
zoom: 12,
368+
style: "road_shaded_relief",
369+
// Get an Azure Maps key at https://azuremaps.com/.
370+
authOptions: {
371+
authType: "subscriptionKey",
372+
subscriptionKey: "<Your Azure Maps Key>"
373+
}
374+
});
375+
376+
// Create a tile source for elevation data. For more information on creating
377+
// elevation data & services using open data, see https://aka.ms/elevation
378+
var elevationSource = new atlas.source.ElevationTileSource("elevation", {
379+
url: "<tileSourceUrl>"
380+
});
381+
382+
// Wait until the map resources are ready.
383+
map.events.add("ready", (event) => {
384+
385+
// Add the elevation source to the map.
386+
map.sources.add(elevationSource);
387+
388+
// Enable elevation on the map.
389+
map.enableElevation(elevationSource);
390+
});
391+
</script>
392+
</body>
393+
</html>
394+
```
395+
231396
## Azure Government cloud support
232397
233398
The Azure Maps Web SDK supports the Azure Government cloud. All JavaScript and CSS URLs used to access the Azure Maps Web SDK remain the same. The following tasks need to be done to connect to the Azure Government cloud version of the Azure Maps platform.
@@ -274,6 +439,7 @@ For a list of samples showing how to integrate Azure AD with Azure Maps, see:
274439
> [!div class="nextstepaction"]
275440
> [Azure AD authentication samples](https://github.com/Azure-Samples/Azure-Maps-AzureAD-Samples)
276441
442+
[3D terrain tiles]: #3d-terrain-tiles
277443
[authentication options]: /javascript/api/azure-maps-control/atlas.authenticationoptions
278444
[Authentication with Azure Maps]: azure-maps-authentication.md
279445
[Azure Maps & Azure Active Directory Samples]: https://github.com/Azure-Samples/Azure-Maps-AzureAD-Samples
@@ -283,7 +449,9 @@ For a list of samples showing how to integrate Azure AD with Azure Maps, see:
283449
[AzureMapsControl.Components]: https://github.com/arnaudleclerc/AzureMapsControl.Components
284450
[azure-maps-control]: https://www.npmjs.com/package/azure-maps-control
285451
[Localization support in Azure Maps]: supported-languages.md
452+
[Map Control]: https://www.npmjs.com/package/azure-maps-control
286453
[ng-azure-maps]: https://github.com/arnaudleclerc/ng-azure-maps
287454
[subscription key]: quick-demo-map-app.md#get-the-subscription-key-for-your-account
288455
[Vue Azure Maps]: https://github.com/rickyruiz/vue-azure-maps
289-
[Map Control]: https://www.npmjs.com/package/azure-maps-control
456+
[WebGL 2 Compatibility]: #webgl-2-compatibility
457+
[WebGL 2]: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API#webgl_2

‎articles/azure-maps/media/how-to-use-map-control/webgl-2-compatability.png

240 KB
Loading

0 commit comments

Comments
 (0)