You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-maps/how-to-use-map-control.md
+21-12Lines changed: 21 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,8 +2,8 @@
2
2
title: How to use the Azure Maps web map control
3
3
titleSuffix: Microsoft Azure Maps
4
4
description: Learn how to add and localize maps to web and mobile applications by using the Map Control client-side JavaScript library in Azure Maps.
5
-
author: eriklindeman
6
-
ms.author: eriklind
5
+
author: dubiety
6
+
ms.author: yuchungchen
7
7
ms.date: 06/29/2023
8
8
ms.topic: how-to
9
9
ms.service: azure-maps
@@ -15,7 +15,7 @@ ms.custom: devx-track-js
15
15
16
16
The Map Control client-side JavaScript library allows you to render maps and embedded Azure Maps functionality into your web or mobile application.
17
17
18
-
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](open-source-projects.md#third-part-map-control-plugins).
18
+
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].
19
19
20
20
## Prerequisites
21
21
@@ -40,7 +40,7 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
* Load the Azure Maps Web SDK source code locally using the [azure-maps-control](https://www.npmjs.com/package/azure-maps-control) npm package and host it with your app. This package also includes TypeScript definitions.
43
+
* Load the Azure Maps Web SDK source code locally using the [azure-maps-control] npm package and host it with your app. This package also includes TypeScript definitions.
44
44
45
45
> **npm install azure-maps-control**
46
46
@@ -80,7 +80,7 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
80
80
</body>
81
81
```
82
82
83
-
5. Next, initialize the map control. In order to authenticate the control, use an Azure Maps subscription key or Azure AD credentials with [authentication options](/javascript/api/azure-maps-control/atlas.authenticationoptions).
83
+
5. Next, initialize the map control. In order to authenticate the control, use an Azure Maps subscription key or Azure AD credentials with [authentication options].
84
84
85
85
If you're using a subscription key for authentication, copy and paste the following script element inside the `<head>` element, and below the first `<script>` element. Replace `<Your Azure Maps Key>` with your Azure Maps subscription key.
86
86
@@ -122,7 +122,7 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
122
122
</script>
123
123
```
124
124
125
-
For more information about authentication with Azure Maps, see the [Authentication with Azure Maps](azure-maps-authentication.md) document. For a list of samples showing how to integrate Azure AD with Azure Maps, see [Azure Maps & Azure Active Directory Samples](https://github.com/Azure-Samples/Azure-Maps-AzureAD-Samples) in GitHub.
125
+
For more information about authentication with Azure Maps, see the [Authentication with Azure Maps] document. For a list of samples showing how to integrate Azure AD with Azure Maps, see [Azure Maps & Azure Active Directory Samples] in GitHub.
126
126
127
127
>[!TIP]
128
128
>In this example, we've passed in the `id` of the map `<div>`. Another way to do this is to pass in the `HTMLElement` object by passing`document.getElementById('myMap')` as the first parameter.
@@ -227,7 +227,7 @@ Here's an example of Azure Maps with the language set to "fr-FR" and the regiona
227
227
228
228

229
229
230
-
For a list of supported languages and regional views, see [Localization support in Azure Maps](supported-languages.md).
230
+
For a list of supported languages and regional views, see [Localization support in Azure Maps].
231
231
232
232
## Azure Government cloud support
233
233
@@ -253,10 +253,10 @@ If directly accessing the Azure Maps REST services, change the URL domain to `at
253
253
254
254
If developing using a JavaScript framework, one of the following open-source projects may be useful:
255
255
256
-
*[ng-azure-maps](https://github.com/arnaudleclerc/ng-azure-maps) - Angular 10 wrapper around Azure maps.
257
-
*[AzureMapsControl.Components](https://github.com/arnaudleclerc/AzureMapsControl.Components) - An Azure Maps Blazor component.
258
-
*[Azure Maps React Component](https://github.com/WiredSolutions/react-azure-maps) - A react wrapper for the Azure Maps control.
259
-
*[Vue Azure Maps](https://github.com/rickyruiz/vue-azure-maps) - An Azure Maps component for Vue application.
256
+
*[ng-azure-maps] - Angular 10 wrapper around Azure maps.
257
+
*[AzureMapsControl.Components] - An Azure Maps Blazor component.
258
+
*[Azure Maps React Component] - A react wrapper for the Azure Maps control.
259
+
*[Vue Azure Maps] - An Azure Maps component for Vue application.
260
260
261
261
## Next steps
262
262
@@ -283,6 +283,15 @@ For a list of samples showing how to integrate Azure AD with Azure Maps, see:
283
283
> [!div class="nextstepaction"]
284
284
> [Azure AD authentication samples](https://github.com/Azure-Samples/Azure-Maps-AzureAD-Samples)
0 commit comments