Skip to content

Commit d3b95cc

Browse files
mikemattesonmikematteson
committed
edit pass: azure-maps-new-articles-batch
1 parent 4c4ea53 commit d3b95cc

File tree

2 files changed

+76
-75
lines changed

2 files changed

+76
-75
lines changed

‎articles/azure-maps/how-to-use-services-module.md

Lines changed: 75 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Using the Services module - Azure Maps | Microsoft Docs
2+
title: Use the services module - Azure Maps | Microsoft Docs
33
description: Learn how to use the Azure Maps services module.
44
author: rbrundritt
55
ms.author: richbrun
@@ -10,88 +10,89 @@ services: azure-maps
1010
manager: cpendleton
1111
---
1212

13-
# Using the Azure Maps Services module
13+
# Use the Azure Maps services module
1414

15-
The Azure Maps Web SDK provides a services module that is a helper library that makes it easy to use the Azure Maps REST services in web or Node.js applications using JavaScript or TypeScript.
15+
The Azure Maps Web SDK provides a *services module*. This module is a helper library that makes it easy to use the Azure Maps REST services in web or Node.js applications by using JavaScript or TypeScript.
1616

17-
## Using the services module in a web page
17+
## Use the services module in a webpage
1818

1919
1. Create a new HTML file.
20-
2. Load in the Azure Maps Services module. This can be done using one of two options;
20+
1. Load the Azure Maps services module. You can load it in one of two ways:
21+
1. Use the globally hosted, Azure Content Delivery Network version of the Azure Maps services module. Add a script reference to the `<head>` element of the file:
2122

22-
a. Use the globally hosted CDN version of the Azure Maps services module by adding a script reference to the `<head>` element of the file:
23-
24-
```html
25-
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>
26-
```
27-
28-
b. Alternatively, load the Azure Maps Web SDK source code locally using the [azure-maps-rest](https://www.npmjs.com/package/azure-maps-rest) NPM package and host it with your app. This package also includes TypeScript definitions.
29-
30-
> npm install azure-maps-rest
23+
```html
24+
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas-service.min.js"></script>
25+
```
26+
27+
1. Alternatively, load the Azure Maps Web SDK source code locally by using the [azure-maps-rest](https://www.npmjs.com/package/azure-maps-rest) npm package, and then host it with your app. This package also includes TypeScript definitions. Use this command:
3128

32-
Then add a script reference to the `<head>` element of the file:
29+
> **npm install azure-maps-rest**
3330

34-
```html
35-
<script src="node_modules/azure-maps-rest/dist/js/atlas-service.min.js"></script>
36-
```
31+
Then, add a script reference to the `<head>` element of the file:
3732

38-
3. To initialize a service URL client endpoint, you must first create an authentication pipeline. Use your own Azure Maps account key or Azure Active Directory (AAD) credentials to authenticate the search service client. In this example, the search service URL client will be created. If using a subscription key for authentication:
33+
```html
34+
<script src="node_modules/azure-maps-rest/dist/js/atlas-service.min.js"></script>
35+
```
36+
37+
1. Create an authentication pipeline. You must create the pipeline before you can initialize a service URL client endpoint. Use your own Azure Maps account key or Azure Active Directory (Azure AD) credentials to authenticate an Azure Maps Search service client. In this example, the Search service URL client will be created.
38+
39+
If you use a subscription key for authentication:
3940

4041
```javascript
41-
//Get an Azure Maps key at https://azure.com/maps
42+
// Get an Azure Maps key at https://azure.com/maps.
4243
var subscriptionKey = '<Your Azure Maps Key>';
43-
44-
//Use SubscriptionKeyCredential with a subscription key.
44+
45+
// Use SubscriptionKeyCredential with a subscription key.
4546
var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(subscriptionKey);
46-
47-
//Use subscriptionKeyCredential to create a pipeline.
47+
48+
// Use subscriptionKeyCredential to create a pipeline.
4849
var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential, {
4950
retryOptions: { maxTries: 4 } // Retry options
5051
});
51-
52-
//Create an instance of the SearchURL client.
52+
53+
// Create an instance of the SearchURL client.
5354
var searchURL = new atlas.service.SearchURL(pipeline);
5455
```
55-
56-
If using Azure Active Directory (AAD) for authentication:
56+
57+
If you use Azure AD for authentication:
5758

5859
```javascript
59-
// Enter your Azure Actiuve Directory client ID.
60-
var clientId = "<Your Azure Active Directory Client Id>";
61-
62-
// Use TokenCredential with OAuth token (AAD or Anonymous).
60+
// Enter your Azure AD client ID.
61+
var clientId = "<Your Azure Active Directory client ID>";
62+
63+
// Use TokenCredential with OAuth token (Azure AD or Anonymous).
6364
var aadToken = await getAadToken();
6465
var tokenCredential = new atlas.service.TokenCredential(clientId, aadToken);
65-
66-
// Create a repeating timeout that will renew the AAD token.
67-
// This timeout must be cleared once the TokenCredential object is no longer needed.
68-
// If the timeout is not cleared the memory used by the TokenCredential will never be reclaimed.
66+
67+
// Create a repeating time-out that will renew the Azure AD token.
68+
// This time-out must be cleared when the TokenCredential object is no longer needed.
69+
// If the time-out is not cleared, the memory used by the TokenCredential will never be reclaimed.
6970
var renewToken = async () => {
70-
try {
71-
console.log("Renewing token");
72-
var token = await getAadToken();
73-
tokenCredential.token = token;
74-
tokenRenewalTimer = setTimeout(renewToken, getExpiration(token));
75-
} catch (error) {
76-
console.log("Caught error when renewing token");
77-
clearTimeout(tokenRenewalTimer);
78-
throw error;
79-
}
71+
try {
72+
console.log("Renewing token");
73+
var token = await getAadToken();
74+
tokenCredential.token = token;
75+
tokenRenewalTimer = setTimeout(renewToken, getExpiration(token));
76+
} catch (error) {
77+
console.log("Caught error when renewing token");
78+
clearTimeout(tokenRenewalTimer);
79+
throw error;
80+
}
8081
}
8182
tokenRenewalTimer = setTimeout(renewToken, getExpiration(aadToken));
82-
83-
// Use tokenCredential to create a pipeline
83+
84+
// Use tokenCredential to create a pipeline.
8485
var pipeline = atlas.service.MapsURL.newPipeline(tokenCredential, {
85-
retryOptions: { maxTries: 4 } // Retry options
86+
retryOptions: { maxTries: 4 } // Retry options
8687
});
87-
88-
//Create an instance of the SearchURL client.
88+
89+
// Create an instance of the SearchURL client.
8990
var searchURL = new atlas.service.SearchURL(pipeline);
9091

9192
function getAadToken() {
92-
//Use the logged in auth context to get a token.
93+
// Use the signed-in auth context to get a token.
9394
return new Promise((resolve, reject) => {
94-
//The resource should always be https://atlas.microsoft.com/.
95+
// The resource should always be https://atlas.microsoft.com/.
9596
const resource = "https://atlas.microsoft.com/";
9697
authContext.acquireToken(resource, (error, token) => {
9798
if (error) {
@@ -104,51 +105,51 @@ The Azure Maps Web SDK provides a services module that is a helper library that
104105
}
105106

106107
function getExpiration(jwtToken) {
107-
//Decode the JWT token to get the expiration timestamp.
108+
// Decode the JSON Web Token (JWT) to get the expiration time stamp.
108109
const json = atob(jwtToken.split(".")[1]);
109110
const decode = JSON.parse(json);
110111

111-
//Return the milliseconds until the token needs renewed.
112-
//Reduce the time until renew by 5 minutes to avoid using an expired token.
113-
//The exp property is the timestamp of the expiration in seconds.
112+
// Return the milliseconds remaining until the token must be renewed.
113+
// Reduce the time until renewal by 5 minutes to avoid using an expired token.
114+
// The exp property is the time stamp of the expiration, in seconds.
114115
const renewSkew = 300000;
115116
return (1000 * decode.exp) - Date.now() - renewSkew;
116117
}
117118
```
118119

119120
For more information, see [Authentication with Azure Maps](azure-maps-authentication.md).
120121

121-
4. The following code uses the newly created search service URL client to geocode an address, "1 Microsoft Way, Redmond, WA" using the `searchAddress` function and display the results as a table in the body of the page.
122+
1. The following code uses the newly created Azure Search service URL client to geocode an address: "1 Microsoft Way, Redmond, WA". The code uses the `searchAddress` function and displays the results as a table in the body of the page.
122123

123124
```javascript
124-
//Search for "1 microsoft way, redmond, wa".
125+
// Search for "1 microsoft way, redmond, wa".
125126
searchURL.searchAddress(atlas.service.Aborter.timeout(10000), '1 microsoft way, redmond, wa').then(response => {
126127
var html = [];
127-
128-
//Display the total results.
128+
129+
// Display the total results.
129130
html.push('Total results: ', response.summary.numResults, '<br/><br/>');
130-
131-
//Create a table of the results.
131+
132+
// Create a table of the results.
132133
html.push('<table><tr><td></td><td>Result</td><td>Latitude</td><td>Longitude</td></tr>');
133-
134+
134135
for(var i=0;i<response.results.length;i++){
135136
html.push('<tr><td>', (i+1), '.</td><td>',
136-
response.results[i].address.freeformAddress,
137-
'</td><td>',
138-
response.results[i].position.lat,
139-
'</td><td>',
140-
response.results[i].position.lon,
141-
'</td></tr>');
137+
response.results[i].address.freeformAddress,
138+
'</td><td>',
139+
response.results[i].position.lat,
140+
'</td><td>',
141+
response.results[i].position.lon,
142+
'</td></tr>');
142143
}
143-
144+
144145
html.push('</table>');
145-
146-
//Add the result HTML to the body of the page.
146+
147+
// Add the resulting HTML to the body of the page.
147148
document.body.innerHTML = html.join('');
148149
});
149150
```
150151

151-
Here is the fully running code sample:
152+
Here's the fully running code sample:
152153
153154
<br/>
154155

‎articles/azure-maps/supported-browsers.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ manager: cpendleton
1212

1313
# Web SDK supported browsers
1414

15-
The Azure Maps Web SDK provides a helper function [atlas.isSupported](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas?view=azure-iot-typescript-latest#issupported-boolean-) to detect if a web browser has the minimum required WebGL features to support loading and rendering the map control.
15+
The Azure Maps Web SDK provides a helper function [atlas.isSupported](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas?view=azure-iot-typescript-latest#issupported-boolean-) to detect if a web browser has the minimum required WebGL features to support loading and rendering the map control.
1616

1717
```
1818
if(!atlas.isSupported()) {

0 commit comments

Comments
 (0)