Skip to content

Commit 903b913

Browse files
AnnaMHuffAnnaMHuff
authored
Merge pull request #272435 from yulinscottkang/service
Azure maps remove references to service module
2 parents 54a1e0b + 64e11d6 commit 903b913

File tree

4 files changed

+137
-154
lines changed

4 files changed

+137
-154
lines changed

‎articles/azure-maps/tutorial-create-store-locator.md

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -173,22 +173,15 @@ To create the HTML:
173173
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
174174
```
175175

176-
3. Next, add a reference to the Azure Maps Services module. This module is a JavaScript library that wraps the Azure Maps REST services, making them easy to use in JavaScript. The Services module is useful for powering search functionality.
177-
178-
```HTML
179-
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
180-
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
181-
```
182-
183-
4. Add references to *index.js* and *index.css*.
176+
3. Add references to *index.js* and *index.css*.
184177

185178
```HTML
186179
<!-- Add references to the store locator JavaScript and CSS files. -->
187180
<link rel="stylesheet" href="index.css" type="text/css">
188181
<script src="index.js"></script>
189182
```
190183

191-
5. In the body of the document, add a `header` tag. Inside the `header` tag, add the logo and company name.
184+
4. In the body of the document, add a `header` tag. Inside the `header` tag, add the logo and company name.
192185

193186
```HTML
194187
<header>
@@ -197,7 +190,7 @@ To create the HTML:
197190
</header>
198191
```
199192

200-
6. Add a `main` tag and create a search panel that has a text box and search button. Also, add `div` references for the map, the list panel, and the My Location GPS button.
193+
5. Add a `main` tag and create a search panel that has a text box and search button. Also, add `div` references for the map, the list panel, and the My Location GPS button.
201194

202195
```HTML
203196
<main>
@@ -461,7 +454,7 @@ To add the JavaScript:
461454
var countrySet = ['US', 'CA', 'GB', 'FR','DE','IT','ES','NL','DK'];
462455

463456
//
464-
var map, popup, datasource, iconLayer, centerMarker, searchURL;
457+
var map, popup, datasource, iconLayer, centerMarker;
465458

466459
// Used in function updateListItems
467460
var listItemTemplate = '<div class="listItem" onclick="itemSelected(\'{id}\')"><div class="listItem-title">{title}</div>{city}<br />Open until {closes}<br />{distance} miles away</div>';
@@ -491,12 +484,6 @@ To add the JavaScript:
491484
//Create a pop-up window, but leave it closed so we can update it and display it later.
492485
popup = new atlas.Popup();
493486
494-
//Use MapControlCredential to share authentication between a map control and the service module.
495-
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));
496-
497-
//Create an instance of the SearchURL client.
498-
searchURL = new atlas.service.SearchURL(pipeline);
499-
500487
//If the user selects the search button, geocode the value the user passed in.
501488
document.getElementById('searchBtn').onclick = performSearch;
502489
@@ -520,20 +507,28 @@ To add the JavaScript:
520507

521508
function performSearch() {
522509
var query = document.getElementById('searchTbx').value;
510+
//Pass in the array of country/region ISO2 for which we want to limit the search to.
511+
var url = `https://atlas.microsoft.com/search/fuzzy/json?api-version=1.0&countrySet=${countrySet}&query=${query}&view=Auto`;
523512

524513
//Perform a fuzzy search on the users query.
525-
searchURL.searchFuzzy(atlas.service.Aborter.timeout(3000), query, {
526-
//Pass in the array of country/region ISO2 for which we want to limit the search to.
527-
countrySet: countrySet,
528-
view: 'Auto'
529-
}).then(results => {
530-
//Parse the response into GeoJSON so that the map can understand.
531-
var data = results.geojson.getFeatures();
532-
533-
if (data.features.length > 0) {
534-
//Set the camera to the bounds of the results.
514+
fetch(url, {
515+
headers: {
516+
"Subscription-Key": map.authentication.getToken()
517+
}
518+
})
519+
.then((response) => response.json())
520+
.then((response) => {
521+
if (Array.isArray(response.results) && response.results.length > 0) {
522+
var result = response.results[0];
523+
var bbox = [
524+
result.viewport.topLeftPoint.lon,
525+
result.viewport.btmRightPoint.lat,
526+
result.viewport.btmRightPoint.lon,
527+
result.viewport.topLeftPoint.lat
528+
];
529+
//Set the camera to the bounds of the first result.
535530
map.setCamera({
536-
bounds: data.features[0].bbox,
531+
bounds: bbox,
537532
padding: 40
538533
});
539534
} else {

‎articles/azure-maps/tutorial-prioritized-routes.md

Lines changed: 62 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,6 @@ The following steps show you how to create and display the Map control in a web
5050
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css">
5151
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
5252

53-
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
54-
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
55-
5653
<script>
5754
var map, datasource, client;
5855
@@ -225,80 +222,92 @@ This section shows you how to use the Azure Maps Route service to get directions
225222
>[!TIP]
226223
>The Route service provides APIs to plan *fastest*, *shortest*, *eco*, or *thrilling* routes based on distance, traffic conditions, and mode of transport used. The service also lets users plan future routes based on historical traffic conditions. Users can see the prediction of route durations for any given time. For more information, see [Get Route directions API].
227224

228-
1. In the `GetMap` function, inside the control's `ready` event handler, add the following to the JavaScript code.
229-
230-
```JavaScript
231-
//Use MapControlCredential to share authentication between a map control and the service module.
232-
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));
233-
234-
//Construct the RouteURL object
235-
var routeURL = new atlas.service.RouteURL(pipeline);
236-
```
237-
238-
* Use [MapControlCredential] to share authentication between a map control and the service module when creating a new [pipeline] object.
239-
240-
* The [routeURL] represents a URL to Azure Maps [Route service].
241-
242-
2. After setting up credentials and the URL, add the following JavaScript code to construct a truck route from the start to end points. This route is created and displayed for a truck carrying `USHazmatClass2` classed cargo.
225+
1. In the `GetMap` function, inside the control's `ready` event handler, add the following JavaScript code to construct a truck route from the start to end points. This route is created and displayed for a truck carrying `USHazmatClass2` classed cargo.
243226

244227
```JavaScript
245-
//Start and end point input to the routeURL
246-
var coordinates= [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]], [endPoint.geometry.coordinates[0], endPoint.geometry.coordinates[1]]];
247-
228+
//Start and end point input to the search route request
229+
var query = startPoint.geometry.coordinates[1] + "," +
230+
startPoint.geometry.coordinates[0] + ":" +
231+
endPoint.geometry.coordinates[1] + "," +
232+
endPoint.geometry.coordinates[0];
248233
//Make a search route request for a truck vehicle type
249-
routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates,{
250-
travelMode: 'truck',
251-
vehicleWidth: 2,
252-
vehicleHeight: 2,
253-
vehicleLength: 5,
254-
vehicleLoadType: 'USHazmatClass2'
255-
}).then((directions) => {
256-
//Get data features from response
257-
var data = directions.geojson.getFeatures();
258-
259-
//Get the route line and add some style properties to it.
260-
var routeLine = data.features[0];
261-
routeLine.properties.strokeColor = '#2272B9';
262-
routeLine.properties.strokeWidth = 9;
263-
264-
//Add the route line to the data source. This should render below the car route which will likely be added to the data source faster, so insert it at index 0.
265-
datasource.add(routeLine, 0);
234+
var truckRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&travelMode=truck&vehicleWidth=2&vehicleHeight=2&vehicleLength=5&vehicleLoadType=USHazmatClass2&query=${query}`;
235+
fetch(truckRouteUrl, {
236+
headers: {
237+
"Subscription-Key": map.authentication.getToken()
238+
}
239+
})
240+
.then((response) => response.json())
241+
.then((response) => {
242+
var route = response.routes[0];
243+
//Create an array to store the coordinates of each turn
244+
var routeCoordinates = [];
245+
route.legs.forEach((leg) => {
246+
var legCoordinates = leg.points.map((point) => {
247+
return [point.longitude, point.latitude];
248+
});
249+
//Add each turn to the array
250+
routeCoordinates = routeCoordinates.concat(legCoordinates);
251+
});
252+
253+
//Add the route line to the data source. We want this to render below the car route which will likely be added to the data source faster, so insert it at index 0.
254+
datasource.add(
255+
new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
256+
strokeColor: "#2272B9",
257+
strokeWidth: 9
258+
}),
259+
0
260+
);
266261
});
267262
```
268263

269264
About the above JavaScript:
270265

271266
* This code queries the Azure Maps Route service through the [Azure Maps Route Directions API].
272-
* The route line is then extracted from the GeoJSON feature collection from the response that is extracted using the `geojson.getFeatures()` method.
267+
* The route line is then created from the coordinates of each turn from the response.
273268
* The route line is then added to the data source.
274269
* Two properties are added to the truck route line: a blue stroke color `#2272B9`, and a stroke width of nine pixels.
275270
* The route line is given an index of 0 to ensure that the truck route is rendered before any other lines in the data source. The reason is the truck route calculation are often slower than a car route calculation. If the truck route line is added to the data source after the car route, it will render above it.
276271

277272
>[!TIP]
278273
> To see all possible options and values for the Azure Maps Route Directions API, see [URI Parameters for Post Route Directions].
279274

280-
3. Next, append the following JavaScript code to create a route for a car.
275+
2. Next, append the following JavaScript code to create a route for a car.
281276

282277
```JavaScript
283-
routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
284-
285-
//Get data features from response
286-
var data = directions.geojson.getFeatures();
287-
288-
//Get the route line and add some style properties to it.
289-
var routeLine = data.features[0];
290-
routeLine.properties.strokeColor = '#B76DAB';
291-
routeLine.properties.strokeWidth = 5;
278+
var carRouteUrl = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;
279+
fetch(carRouteUrl, {
280+
headers: {
281+
"Subscription-Key": map.authentication.getToken()
282+
}
283+
})
284+
.then((response) => response.json())
285+
.then((response) => {
286+
var route = response.routes[0];
287+
//Create an array to store the coordinates of each turn
288+
var routeCoordinates = [];
289+
route.legs.forEach((leg) => {
290+
var legCoordinates = leg.points.map((point) => {
291+
return [point.longitude, point.latitude];
292+
});
293+
//Add each turn to the array
294+
routeCoordinates = routeCoordinates.concat(legCoordinates);
295+
});
292296

293-
//Add the route line to the data source. This will add the car route after the truck route.
294-
datasource.add(routeLine);
297+
//Add the route line to the data source. This will add the car route after the truck route.
298+
datasource.add(
299+
new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
300+
strokeColor: "#B76DAB",
301+
strokeWidth: 5
302+
})
303+
);
295304
});
296305
```
297306

298307
About the above JavaScript:
299308

300309
* This code queries the Azure Maps routing service through the [Azure Maps Route Directions API] method.
301-
* The route line is then extracted from the GeoJSON feature collection from the response that is extracted using the `geojson.getFeatures()` method then is added to the data source.
310+
* The route line is then created from the coordinates of each turn and added to the data source.
302311
* Two properties are added to the truck route line: a purple stroke color `#B76DAB`, and a stroke width of five pixels.
303312

304313
4. Save the **TruckRoute.html** file and refresh your web browser. The map should now display both the truck and car routes.
@@ -325,8 +334,6 @@ The next tutorial demonstrates the process of creating a simple store locator us
325334
[Route service]: /rest/api/maps/route
326335
[Map control]: how-to-use-map-control.md
327336
[Get Route directions API]: /rest/api/maps/route/getroutedirections
328-
[routeURL]: /javascript/api/azure-maps-rest/atlas.service.routeurl
329-
[pipeline]: /javascript/api/azure-maps-rest/atlas.service.pipeline
330337
[TrafficOptions interface]: /javascript/api/azure-maps-control/atlas.trafficoptions
331338
[atlas]: /javascript/api/azure-maps-control/atlas
332339
[atlas.Map]: /javascript/api/azure-maps-control/atlas.map
@@ -336,8 +343,7 @@ The next tutorial demonstrates the process of creating a simple store locator us
336343
[Data-driven style expressions]: data-driven-style-expressions-web-sdk.md
337344
[GeoJSON Point objects]: https://en.wikipedia.org/wiki/GeoJSON
338345
[setCamera]: /javascript/api/azure-maps-control/atlas.map#setCamera_CameraOptions___CameraBoundsOptions___AnimationOptions_
339-
[MapControlCredential]: /javascript/api/azure-maps-rest/atlas.service.mapcontrolcredential
340-
[Azure Maps Route Directions API]: /javascript/api/azure-maps-rest/atlas.service.routeurl#calculateroutedirections-aborter--geojson-position----calculateroutedirectionsoptions-
346+
[Azure Maps Route Directions API]: /rest/api/maps/route/getroutedirections
341347
[Truck Route]: https://github.com/Azure-Samples/AzureMapsCodeSamples/tree/main/Samples/Tutorials/Truck%20Route
342348
[Multiple routes by mode of travel]: https://samples.azuremaps.com/?sample=multiple-routes-by-mode-of-travel
343349
[URI Parameters for Post Route Directions]: /rest/api/maps/route/postroutedirections#uri-parameters

‎articles/azure-maps/tutorial-route-location.md

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,6 @@ The following steps show you how to create and display the Map control in a web
5050
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css">
5151
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
5252

53-
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
54-
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
55-
5653
<script>
5754
var map, datasource, client;
5855
@@ -204,38 +201,42 @@ This section shows you how to use the Azure Maps Route Directions API to get rou
204201
1. In the `GetMap` function, inside the control's `ready` event handler, add the following to the JavaScript code.
205202

206203
```JavaScript
207-
//Use MapControlCredential to share authentication between a map control and the service module.
208-
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));
209-
210-
//Construct the RouteURL object
211-
var routeURL = new atlas.service.RouteURL(pipeline);
212-
```
213-
214-
* Use [MapControlCredential] to share authentication between a map control and the service module when creating a new [pipeline] object.
215-
216-
* The [routeURL] represents a URL to Azure Maps [Route service API].
217-
218-
2. After setting up credentials and the URL, append the following code at the end of the control's `ready` event handler.
219-
220-
```JavaScript
221-
//Start and end point input to the routeURL
222-
var coordinates= [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]], [endPoint.geometry.coordinates[0], endPoint.geometry.coordinates[1]]];
204+
var query = startPoint.geometry.coordinates[1] + "," +
205+
startPoint.geometry.coordinates[0] + ":" +
206+
endPoint.geometry.coordinates[1] + "," +
207+
endPoint.geometry.coordinates[0];
208+
var url = `https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${query}`;
223209

224210
//Make a search route request
225-
routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
226-
//Get data features from response
227-
var data = directions.geojson.getFeatures();
228-
datasource.add(data);
211+
fetch(url, {
212+
headers: {
213+
"Subscription-Key": map.authentication.getToken()
214+
}
215+
})
216+
.then((response) => response.json())
217+
.then((response) => {
218+
var route = response.routes[0];
219+
//Create an array to store the coordinates of each turn
220+
var routeCoordinates = [];
221+
route.legs.forEach((leg) => {
222+
var legCoordinates = leg.points.map((point) => {
223+
return [point.longitude, point.latitude];
224+
});
225+
//Add each turn to the array
226+
routeCoordinates = routeCoordinates.concat(legCoordinates);
227+
});
228+
//Add route line to the datasource
229+
datasource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates)));
229230
});
230231
```
231232

232233
Some things to know about the above JavaScript:
233234

234235
* This code constructs the route from the start to end point.
235-
* The `routeURL` requests the Azure Maps Route service API to calculate route directions.
236-
* A GeoJSON feature collection from the response is then extracted using the `geojson.getFeatures()` method and added to the data source.
236+
* The `url` queries the Azure Maps Route service API to calculate route directions.
237+
* An array of coordinates is then extracted from the response and added to the data source.
237238

238-
3. Save the **MapRoute.html** file and refresh your web browser. The map should now display the route from the start to end points.
239+
2. Save the **MapRoute.html** file and refresh your web browser. The map should now display the route from the start to end points.
239240

240241
:::image type="content" source="./media/tutorial-route-location/map-route.png" lightbox="./media/tutorial-route-location/map-route.png" alt-text="A screenshot showing a map that demonstrates the Azure Map control and Route service.":::
241242

@@ -260,12 +261,9 @@ The next tutorial shows you how to create a route query with restrictions, like
260261
[Get Route directions API]: /rest/api/maps/route/getroutedirections
261262
[Line layers]: map-add-line-layer.md
262263
[Map control]: ./how-to-use-map-control.md
263-
[MapControlCredential]: /javascript/api/azure-maps-rest/atlas.service.mapcontrolcredential
264-
[pipeline]: /javascript/api/azure-maps-rest/atlas.service.pipeline
265264
[Route service API]: /rest/api/maps/route
266265
[Route to a destination]: https://samples.azuremaps.com/?sample=route-to-a-destination
267266
[route tutorial]: https://github.com/Azure-Samples/AzureMapsCodeSamples/tree/master/Samples/Tutorials/Route
268-
[routeURL]: /javascript/api/azure-maps-rest/atlas.service.routeurl
269267
[setCamera(CameraOptions | CameraBoundsOptions & AnimationOptions)]: /javascript/api/azure-maps-control/atlas.map#setcamera-cameraoptions---cameraboundsoptions---animationoptions-
270268
[subscription key]: quick-demo-map-app.md#get-the-subscription-key-for-your-account
271269
[Symbol layers]: map-add-pin.md

0 commit comments

Comments
 (0)