Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
126 lines (101 sloc) 4.97 KB
<!DOCTYPE html>
<html lang="en">
<title>Route to a destination - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<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 your Azure Maps subscription key to the map SDK. Get an Azure Maps key at
authOptions: {
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 SubscriptionKeyCredential with a subscription key
var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(atlas.getSubscriptionKey());
// Use subscriptionKeyCredential to create a pipeline
var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential);
//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>
You can’t perform that action at this time.