Permalink
Cannot retrieve contributors at this time
AzureMapsGovCloudCodeSamples/AzureMapsCodeSamples/REST Services/Simple REST Directions.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
164 lines (137 sloc)
7.91 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>Simple REST Directions (Route) - Azure Maps Web SDK Samples</title> | |
<meta charset="utf-8" /> | |
<link rel="shortcut icon" href="/favicon.ico"/> | |
<meta http-equiv="x-ua-compatible" content="IE=Edge" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | |
<meta name="description" content="This sample shows how to calculate simple directions between two points using the Azure Maps REST Route API and render it on a map." /> | |
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, REST, service, directions, route, routing" /> | |
<meta name="author" content="Microsoft Azure Maps" /> | |
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. --> | |
<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> | |
<script type='text/javascript'> | |
var map, datasource; | |
var restRoutingRequestUrl = 'https://{azMapsDomain}/route/directions/json?api-version=1&query={query}&routeRepresentation=polyline&travelMode=car&view=Auto'; | |
function GetMap() { | |
//Point the Azure Maps domain to the US Azure Gov Cloud domain. | |
atlas.setDomain('atlas.azure.us'); | |
//Initialize a map instance. | |
map = new atlas.Map('myMap', { | |
center: [-122.33, 47.6], | |
zoom: 12, | |
view: 'Auto', | |
//Add authentication details for connecting to Azure Maps. | |
authOptions: { | |
//Use Azure Active Directory authentication. | |
authType: 'anonymous', | |
clientId: 'c9f2f391-13f1-407b-a4a5-f0a241bacfbf', //Your Azure Active Directory client id for accessing your Azure Maps account. | |
getToken: function (resolve, reject, map) { | |
//URL to your authentication service that retrieves an Azure Active Directory Token. | |
var tokenServiceUrl = 'https://azuremapscodesamples.azurewebsites.us/Common/TokenService.ashx'; | |
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token)); | |
} | |
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key. | |
//authType: 'subscriptionKey', | |
//subscriptionKey: '<Your Azure Maps Key>' | |
} | |
}); | |
//Wait until the map resources are ready. | |
map.events.add('ready', function () { | |
//Create a data source and add it to the map. | |
datasource = new atlas.source.DataSource(); | |
map.sources.add(datasource); | |
//Add a layer for rendering the route line and have it render under the map labels. | |
map.layers.add(new atlas.layer.LineLayer(datasource, null, { | |
strokeColor: '#2272B9', | |
strokeWidth: 5, | |
lineJoin: 'round', | |
lineCap: 'round' | |
}), 'labels'); | |
//Add a layer for rendering point data. | |
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, { | |
iconOptions: { | |
image: ['get', 'iconImage'], | |
allowOverlap: true, | |
ignorePlacement: true | |
}, | |
textOptions: { | |
textField: ['get', 'title'], | |
offset: [0, 1] | |
}, | |
filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] //Only render Point or MultiPoints in this layer. | |
})); | |
/* Create the GeoJSON objects which represent the start and end point of the route */ | |
var startPosition = [-122.33028, 47.60323]; | |
var startPoint = new atlas.data.Feature(new atlas.data.Point(startPosition), { | |
title: 'Seattle', | |
iconImage: 'pin-blue' | |
}); | |
var endPosition = [-122.124, 47.67491]; | |
var endPoint = new atlas.data.Feature(new atlas.data.Point(endPosition), { | |
title: 'Redmond', | |
iconImage: 'pin-red' | |
}); | |
//Add the data to the data source. | |
datasource.add([startPoint, endPoint]); | |
//Fit the map window to the bounding box defined by the start and end positions. | |
map.setCamera({ | |
bounds: atlas.data.BoundingBox.fromPositions([startPosition, endPosition]), | |
padding: 50 | |
}); | |
//Create the route request with the query being the start and end point in the format 'startLongitude,startLatitude:endLongitude,endLatitude'. | |
var requestUrl = restRoutingRequestUrl.replace('{query}', `${startPosition[1]},${startPosition[0]}:${endPosition[1]},${endPosition[0]}`); | |
//Process the request and render the route result on the map. | |
processRequest(requestUrl).then(response => { | |
var route = response.routes[0]; | |
var routeCoordinates = []; | |
for (var legIndex = 0; legIndex < route.legs.length; legIndex++) { | |
var leg = route.legs[legIndex]; | |
//Convert the route point data into a format that the map control understands. | |
var legCoordinates = leg.points.map(function (point) { | |
return [point.longitude, point.latitude]; | |
}); | |
//Combine the route point data for each route leg together to form a single path. | |
routeCoordinates = routeCoordinates.concat(legCoordinates); | |
} | |
//Create a line from the route path points and add it to the data source. | |
var routeLine = new atlas.data.LineString(routeCoordinates); | |
datasource.add(routeLine); | |
}); | |
}); | |
} | |
function processRequest(url) { | |
//This is a reusable function that sets the Azure Maps platform domain, sings the request, and makes use of any transformRequest set on the map. | |
return new Promise((resolve, reject) => { | |
//Replace the domain placeholder to ensure the same Azure Maps cloud is used throughout the app. | |
url = url.replace('{azMapsDomain}', atlas.getDomain()); | |
//Get the authentication details from the map for use in the request. | |
var requestParams = map.authentication.signRequest({ url: url }); | |
//Transform the request. | |
var transform = map.getServiceOptions().tranformRequest; | |
if (transform) { | |
requestParams = transform(url); | |
} | |
fetch(requestParams.url, { | |
method: 'GET', | |
mode: 'cors', | |
headers: new Headers(requestParams.headers) | |
}) | |
.then(r => r.json(), e => reject(e)) | |
.then(r => { | |
resolve(r); | |
}, e => reject(e)); | |
}); | |
} | |
</script> | |
</head> | |
<body onload="GetMap()"> | |
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div> | |
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;"> | |
<legend><h1 style="font-size:16px">Simple REST Directions (Route)</h1></legend> | |
This sample shows how to calculate simple directions between two points using the Azure Maps REST Route API and render it on a map. | |
</fieldset> | |
</body> | |
</html> |