Skip to content

Commit 2c2ec52

Browse files
committed
Improved Axrolinx scrore from 80 to 100.
1 parent c608d33 commit 2c2ec52

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ titleSuffix: Microsoft Azure Maps
44
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.
55
author: eriklindeman
66
ms.author: eriklind
7-
ms.date: 11/29/2021
7+
ms.date: 06/29/2023
88
ms.topic: how-to
99
ms.service: azure-maps
1010
services: azure-maps
@@ -23,7 +23,7 @@ To use the Map Control in a web page, you must have one of the following prerequ
2323

2424
* An [Azure Maps account]
2525
* A [subscription key]
26-
* Obtain your Azure Active Directory (AAD) credentials with [authentication options]
26+
* Obtain your Azure Active Directory (Azure AD) credentials with [authentication options]
2727

2828
## Create a new map in a web page
2929

@@ -33,7 +33,7 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
3333

3434
2. Load in the Azure Maps Web SDK. You can choose one of two options:
3535

36-
* 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:
36+
* 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:
3737

3838
```html
3939
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
@@ -44,7 +44,7 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
4444

4545
> **npm install azure-maps-control**
4646

47-
Then add references to the Azure Maps stylesheet to the `<head>` element of the file:
47+
Then add references to the Azure Maps `stylesheet` to the `<head>` element of the file:
4848

4949
```html
5050
<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
8080
</body>
8181
```
8282

83-
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).
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).
8484

8585
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.
8686

@@ -101,7 +101,7 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
101101
</script>
102102
```
103103

104-
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.
104+
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.
105105
106106
```HTML
107107
<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
122122
</script>
123123
```
124124

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 Active Directory (AAD) 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](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.
126126

127127
>[!TIP]
128128
>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
137137
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
138138
```
139139

140-
7. Putting it all together, your HTML file should look something like the following markup:
140+
7. Your HTML file should now look something like the following code snippet:
141141

142142
```HTML
143143
<!DOCTYPE html>
@@ -191,13 +191,13 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
191191
</html>
192192
```
193193

194-
8. Open the file in your web browser and view the rendered map. It should look like the image below:
194+
8. Open the file in your web browser and view the rendered map. It should look like the following image:
195195

196196
![Map image showing rendered result](./media/how-to-use-map-control/map-of-seattle.png)
197197

198198
## Localizing the map
199199

200-
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":
200+
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":
201201

202202
```javascript
203203
atlas.setLanguage('fr-FR');
@@ -223,15 +223,15 @@ map = new atlas.Map('myMap', {
223223
> [!NOTE]
224224
> 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.
225225
226-
Here is an example of Azure Maps with the language set to "fr-FR" and the regional view set to "Auto".
226+
Here's an example of Azure Maps with the language set to "fr-FR" and the regional view set to `Auto`.
227227

228228
![Map image showing labels in French](./media/how-to-use-map-control/websdk-localization.png)
229229

230230
For a list of supported languages and regional views, see [Localization support in Azure Maps](supported-languages.md).
231231

232232
## Azure Government cloud support
233233

234-
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.
234+
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.
235235

236236
When using the interactive map control, add the following line of code before creating an instance of the `Map` class.
237237

@@ -241,7 +241,7 @@ atlas.setDomain('atlas.azure.us');
241241

242242
Be sure to use Azure Maps authentication details from the Azure Government cloud platform when authenticating the map and services.
243243

244-
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.
244+
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.
245245

246246
```javascript
247247
var searchURL = new atlas.service.SearchURL(pipeline, 'atlas.azure.us');
@@ -278,7 +278,7 @@ Learn best practices and see samples:
278278
> [!div class="nextstepaction"]
279279
> [Code samples](/samples/browse/?products=azure-maps)
280280
281-
For a list of samples showing how to integrate Azure Active Directory (AAD) with Azure Maps, see:
281+
For a list of samples showing how to integrate Azure AD with Azure Maps, see:
282282

283283
> [!div class="nextstepaction"]
284284
> [Azure AD authentication samples](https://github.com/Azure-Samples/Azure-Maps-AzureAD-Samples)

0 commit comments

Comments
 (0)