An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
Using the routing services with the Azure Maps Web SDK is actually easier with the latest version as the response is a GeoJSON feature collection you can add directly to the map (no additional processing needed). To make a query using a subscription key it can be as easy as this:
var routeRequestBody = {
type: 'FeatureCollection',
features: [startPoint, endPoint],
optimizeRoute: 'fastestWithTraffic',
routeOutputOptions: ['routePath'],
maxRouteCount: 1,
travelMode: 'driving'
};
fetch('https://atlas.microsoft.com/route/directions?api-version=2025-01-01', {
method: 'POST',
mode: 'cors',
headers: new Headers({
'Content-type': 'application/json; charset=UTF-8',
'subscription-key': atlas.getSubscriptionKey() //Get the subscription key used by the Web SDK
}),
body: JSON.stringify(routeRequestBody)
}).then(r => r.json()).then(directions => {
// Add directions to the data source.
datasource.add(directions);
});
If you use a more advanced method of authentication with Azure Maps, then you can use the processPostRequest helper method in the code sample site which will leverage these auth settings from the map. This is also a good option if you switch auth methods between dev and prod. Here is a code block example:
// Create the route request.
var routeRequestBody = {
type: 'FeatureCollection',
features: [startPoint, endPoint],
optimizeRoute: 'fastestWithTraffic',
routeOutputOptions: ['routePath'],
maxRouteCount: 1,
travelMode: 'driving'
};
// Process the request and render the route result on the map.
processPostRequest('https://atlas.microsoft.com/route/directions?api-version=2025-01-01', JSON.stringify(routeRequestBody)).then(directions => {
// Add directions to the data source.
datasource.add(directions);
});
async function processPostRequest(url, body) {
const requestParams = await signRequest(url);
const response = await fetch(requestParams.url, {
method: 'POST',
mode: 'cors',
headers: new Headers(requestParams.headers),
body: body
});
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.status} ${response.statusText}`);
}
return response.json();
}
async function signRequest(url) {
// Replace the domain placeholder to ensure the same Azure Maps 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 = await map.authentication.signRequest({ url });
// Add content type of body to the headers.
requestParams.headers['Content-type'] = 'application/json; charset=UTF-8';
// Transform the request.
var transform = map.getServiceOptions().transformRequest;
if (transform) requestParams = await transform(url);
return requestParams;
}
I've made a pull request on the sample site with an update for the one sample. You can see the full update code here: https://github.com/Azure-Samples/AzureMapsCodeSamples/pull/181