Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<title>Route to a destination - 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 tutorial shows how to calculate a route and display it on the map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, services, module, tutorials, routing, directions, route, truck, commercial vehicle" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<!-- Add a reference to the Azure Maps Services Module JavaScript file. -->
<script src=""></script>
var map, datasource, client;
function GetMap() {
// Instantiate a map object
var map = new atlas.Map('myMap', {
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 = '';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
//Alternatively, use an Azure Maps key. Get an Azure Maps key at NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '<Your Azure Maps Key>'
//Wait until the map resources are ready.'ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
//Add a layer for rendering the route lines 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', 'icon'],
allowOverlap: true
textOptions: {
textField: ['get', 'title'],
offset: [0, 1.2]
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 points of the route.
var startPoint = new[-122.130137, 47.644702]), {
title: "Redmond",
icon: "pin-blue"
var endPoint = new[-122.3352, 47.61397]), {
title: "Seattle",
icon: "pin-round-blue"
//Add the data to the data source.
datasource.add([startPoint, endPoint]);
bounds:[startPoint, endPoint]),
padding: 80
//Use MapControlCredential to share authentication between a map control and the service module.
var pipeline = atlas.service.MapsURL.newPipeline(new atlas.service.MapControlCredential(map));
//Construct the RouteURL object
var routeURL = new atlas.service.RouteURL(pipeline, '');
//Start and end point input to the routeURL
var coordinates = [[startPoint.geometry.coordinates[0], startPoint.geometry.coordinates[1]], [endPoint.geometry.coordinates[0], endPoint.geometry.coordinates[1]]];
//Make a search route request
routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), coordinates).then((directions) => {
//Get data features from response
var data = directions.geojson.getFeatures();
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
#myMap {
width: 100%;
height: 100%;
<body onload="GetMap()">
<div id="myMap"></div>