Merge pull request #111540 from stevemunk/how-to-use-map-control-grammar

Jak-MS · web-flow · commit 617c3f7dc8ad · 2023-06-28T15:48:41.000-06:00
Improve grammar and change to end-links in article: How to use map control grammar
diff --git a/articles/azure-maps/how-to-use-map-control.md b/articles/azure-maps/how-to-use-map-control.md
@@ -2,9 +2,9 @@
 title: How to use the Azure Maps web map control
 titleSuffix: Microsoft Azure Maps
 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. 
-author: eriklindeman
-ms.author: eriklind
-ms.date: 11/29/2021
+author: dubiety
+ms.author: yuchungchen
+ms.date: 06/29/2023
 ms.topic: how-to
 ms.service: azure-maps
 services: azure-maps
@@ -15,15 +15,15 @@ ms.custom: devx-track-js
 
 The Map Control client-side JavaScript library allows you to render maps and embedded Azure Maps functionality into your web or mobile application.
 
-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).
+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].
 
 ## Prerequisites
 
 To use the Map Control in a web page, you must have one of the following prerequisites:
 
 * An [Azure Maps account]
 * A [subscription key]
-* Obtain your Azure Active Directory (AAD) credentials with [authentication options]
+* Obtain your Azure Active Directory (Azure AD) credentials with [authentication options]
 
 ## Create a new map in a web page
 
@@ -33,18 +33,18 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
 
 2. Load in the Azure Maps Web SDK. You can choose one of two options:
 
-    * Use the globally hosted CDN version of the Azure Maps Web SDK by adding references to the JavaScript and stylesheet in the `<head>` element of the HTML file:
+    * Use the globally hosted CDN version of the Azure Maps Web SDK by adding references to the JavaScript and `stylesheet` in the `<head>` element of the HTML file:
 
       ```html
       <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
       <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
       ```
 
-    * 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.
+    * 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.
 
       > **npm install azure-maps-control**
 
-    Then add references to the Azure Maps stylesheet to the `<head>` element of the file:
+    Then add references to the Azure Maps `stylesheet` to the `<head>` element of the file:
 
     ```html
     <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
@@ -80,7 +80,7 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
     </body>
    ```
 
-5. Now, we'll initialize the map control. In order to authenticate the control, you'll either need to own an Azure Maps subscription key or use Azure Active Directory (AAD) credentials with [authentication options](/javascript/api/azure-maps-control/atlas.authenticationoptions).
+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].
 
     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.
 
@@ -101,7 +101,7 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
     </script>
     ```
 
-    If you're using Azure Active Directory (AAD) for authentication, copy and paste the following script element inside the `<head>` element, and below the first `<script>` element.
+    If you're using Azure AD for authentication, copy and paste the following script element inside the `<head>` element, and below the first `<script>` element.
 
       ```HTML
     <script type="text/javascript">
@@ -122,7 +122,7 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
     </script>
    ```
 
-    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 Active Directory (AAD) with Azure Maps, see [Azure Maps & Azure Active Directory Samples](https://github.com/Azure-Samples/Azure-Maps-AzureAD-Samples) in GitHub.
+    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.
 
     >[!TIP]
     >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.
@@ -137,7 +137,7 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    ```
 
-7. Putting it all together, your HTML file should look something like the following markup:
+7. Your HTML file should now look something like the following code snippet:
 
    ```HTML
     <!DOCTYPE html>
@@ -191,13 +191,13 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
     </html>
     ```
 
-8. Open the file in your web browser and view the rendered map. It should look like the image below:
+8. Open the file in your web browser and view the rendered map. It should look like the following image:
 
    ![Map image showing rendered result](./media/how-to-use-map-control/map-of-seattle.png)
 
 ## Localizing the map
 
-Azure Maps provides two different ways of setting the language and regional view for the rendered map. The first option is to add this information to the global `atlas` namespace, which will result in all map control instances in your app defaulting to these settings. The following sets the language to French ("fr-FR") and the regional view to "Auto":
+Azure Maps provides two different ways of setting the language and regional view for the rendered map. The first option is to add this information to the global `atlas` namespace, which results in all map control instances in your app defaulting to these settings. The following sets the language to French ("fr-FR") and the regional view to "Auto":
 
 ```javascript
 atlas.setLanguage('fr-FR');
@@ -223,15 +223,15 @@ map = new atlas.Map('myMap', {
 > [!NOTE]
 > It is possible to load multiple map instances on the same page with different language and region settings. Additionally, these settings can be updated after the map loads using the `setStyle` function of the map.
 
-Here is an example of Azure Maps with the language set to "fr-FR" and the regional view set to "Auto".
+Here's an example of Azure Maps with the language set to "fr-FR" and the regional view set to `Auto`.
 
 ![Map image showing labels in French](./media/how-to-use-map-control/websdk-localization.png)
 
-For a list of supported languages and regional views, see [Localization support in Azure Maps](supported-languages.md).
+For a list of supported languages and regional views, see [Localization support in Azure Maps].
 
 ## Azure Government cloud support
 
-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 will need to be done to connect to the Azure Government cloud version of the Azure Maps platform.
+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.
 
 When using the interactive map control, add the following line of code before creating an instance of the `Map` class.
 
@@ -241,7 +241,7 @@ atlas.setDomain('atlas.azure.us');
 
 Be sure to use Azure Maps authentication details from the Azure Government cloud platform when authenticating the map and services.
 
-When using the services module, the domain for the services needs to be set when creating an instance of an API URL endpoint. For example, the following code creates an instance of the `SearchURL` class and points the domain to the Azure Government cloud.
+The domain for the services needs to be set when creating an instance of an API URL endpoint, when using the services module. For example, the following code creates an instance of the `SearchURL` class and points the domain to the Azure Government cloud.
 
 ```javascript
 var searchURL = new atlas.service.SearchURL(pipeline, 'atlas.azure.us');
@@ -253,10 +253,10 @@ If directly accessing the Azure Maps REST services, change the URL domain to `at
 
 If developing using a JavaScript framework, one of the following open-source projects may be useful:
 
-* [ng-azure-maps](https://github.com/arnaudleclerc/ng-azure-maps) - Angular 10 wrapper around Azure maps.
-* [AzureMapsControl.Components](https://github.com/arnaudleclerc/AzureMapsControl.Components) - An Azure Maps Blazor component.
-* [Azure Maps React Component](https://github.com/WiredSolutions/react-azure-maps) - A react wrapper for the Azure Maps control.
-* [Vue Azure Maps](https://github.com/rickyruiz/vue-azure-maps) - An Azure Maps component for Vue application.
+* [ng-azure-maps] - Angular 10 wrapper around Azure maps.
+* [AzureMapsControl.Components] - An Azure Maps Blazor component.
+* [Azure Maps React Component] - A react wrapper for the Azure Maps control.
+* [Vue Azure Maps] - An Azure Maps component for Vue application.
 
 ## Next steps
 
@@ -278,11 +278,20 @@ Learn best practices and see samples:
 > [!div class="nextstepaction"]
 > [Code samples](/samples/browse/?products=azure-maps)
 
-For a list of samples showing how to integrate Azure Active Directory (AAD) with Azure Maps, see:
+For a list of samples showing how to integrate Azure AD with Azure Maps, see:
 
 > [!div class="nextstepaction"]
 > [Azure AD authentication samples](https://github.com/Azure-Samples/Azure-Maps-AzureAD-Samples)
 
+[authentication options]: /javascript/api/azure-maps-control/atlas.authenticationoptions
+[Authentication with Azure Maps]: azure-maps-authentication.md
+[Azure Maps & Azure Active Directory Samples]: https://github.com/Azure-Samples/Azure-Maps-AzureAD-Samples
 [Azure Maps account]: quick-demo-map-app.md#create-an-azure-maps-account
+[Azure Maps community - Open-source projects]: open-source-projects.md#third-part-map-control-plugins
+[Azure Maps React Component]: https://github.com/WiredSolutions/react-azure-maps
+[AzureMapsControl.Components]: https://github.com/arnaudleclerc/AzureMapsControl.Components
+[azure-maps-control]: https://www.npmjs.com/package/azure-maps-control
+[Localization support in Azure Maps]: supported-languages.md
+[ng-azure-maps]: https://github.com/arnaudleclerc/ng-azure-maps
 [subscription key]: quick-demo-map-app.md#get-the-subscription-key-for-your-account
-[authentication options]: /javascript/api/azure-maps-control/atlas.authenticationoptions
+[Vue Azure Maps]: https://github.com/rickyruiz/vue-azure-maps
