Permalink
Cannot retrieve contributors at this time
AzureMapsGovCloudCodeSamples/AzureMapsCodeSamples/Services Module/Show traffic along route.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
269 lines (220 sloc)
12.3 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>Show traffic along 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 retrieve traffic information along a route using the <b>sectionType</b> option, and color the sections on the map. " /> | |
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, services, module, route, directions, route sections, traffic" /> | |
<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> | |
<!-- Add a reference to the Azure Maps Services Module JavaScript file. --> | |
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script> | |
<script type='text/javascript'> | |
var map, datasource, popup, searchURL, routeURL; | |
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', { | |
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>' | |
} | |
}); | |
//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 and point to the US Azure Gov Cloud domain. | |
routeURL = new atlas.service.RouteURL(pipeline, 'atlas.azure.us'); | |
//Create the SearchURL clien and point to the US Azure Gov Cloud domain. | |
searchURL = new atlas.service.SearchURL(pipeline, 'atlas.azure.us'); | |
//Wait until the map resources are ready. | |
map.events.add('ready', function () { | |
//Create a popup for displaying route section details. | |
popup = new atlas.Popup(); | |
datasource = new atlas.source.DataSource(); | |
map.sources.add(datasource); | |
//Create two line layers. One for the base route line, and another for the traffic sections on top. Render these below the labels. | |
map.layers.add( | |
//Render the base route line. This will look like an outline in areas that have traffic. | |
new atlas.layer.LineLayer(datasource, null, { | |
strokeWidth: 9, | |
lineJoin: 'round', | |
lineCap: 'round', | |
filter: ['!', ['has', 'magnitudeOfDelay']] | |
}), 'labels'); | |
//Render the traffic section data above the route line. | |
var sectionLayer = new atlas.layer.LineLayer(datasource, null, { | |
//Use an expression to style the color based on the traffics magnitiude of delay metric: https://docs.microsoft.com/en-us/rest/api/maps/route/getroutedirections#magnitudeofdelay | |
strokeColor: [ | |
'match', | |
['get', 'magnitudeOfDelay'], | |
3, 'red', | |
2, 'orange', | |
[ | |
'match', | |
['get', 'simpleCategory'], | |
//If the category of the section is a Jam, make it orange. | |
'JAM', 'orange', | |
//If the category of the section is a road closure, make it black. | |
'ROAD_CLOSURE', 'black', | |
'GreenYellow' | |
] | |
], | |
strokeWidth: 7, | |
lineJoin: 'round', | |
lineCap: 'butt', | |
filter: ['has', 'magnitudeOfDelay'] | |
}); | |
//Add mouse events on the section layer so we can show a popup with details about the traffic issue. | |
map.events.add('mousemove', sectionLayer, showPopup); | |
map.events.add('touchstart', sectionLayer, showPopup); | |
//Close the popup on mouseout or touchend. | |
map.events.add('mouseout', sectionLayer, closePopup); | |
map.events.add('touchend', closePopup); | |
map.layers.add(sectionLayer, 'labels'); | |
//Create a layer for rendering the start and end points of the route as symbols. | |
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, { | |
iconOptions: { | |
image: ['get', 'iconImage'], | |
allowOverlap: true, | |
ignorePlacement: 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. | |
})); | |
//Calculate the initial route. | |
calculateRoute(); | |
}); | |
} | |
async function calculateRoute() { | |
datasource.clear(); | |
var start = document.getElementById('startTbx').value; | |
var end = document.getElementById('endTbx').value; | |
if (start == '' || end == '') { | |
alert('Invalid waypoint point specified.'); | |
return; | |
} | |
var geocodeOptions = { | |
limit: 1, | |
view: 'Auto' | |
}; | |
//Geocode the start location. | |
var startResult = await searchURL.searchAddress(atlas.service.Aborter.timeout(3000), start, geocodeOptions); | |
if (startResult.results && startResult.results.length > 0) { | |
var startPoint = [startResult.results[0].position.lon, startResult.results[0].position.lat]; | |
//Geocode the end location. | |
var endResult = await searchURL.searchAddress(atlas.service.Aborter.timeout(3000), end, geocodeOptions); | |
if (endResult.results && endResult.results.length > 0) { | |
var endPoint = [endResult.results[0].position.lon, endResult.results[0].position.lat]; | |
//Calculate a route. | |
var directions = await routeURL.calculateRouteDirections(atlas.service.Aborter.timeout(10000), [startPoint, endPoint], { | |
sectionType: 'traffic', //Route option to return traffic sections. | |
maxAlternatives: 0 | |
}); | |
//Get the route data as GeoJSON and add it to the data source. | |
var data = directions.geojson.getFeatures(); | |
var route = data.features[0]; | |
datasource.add([route, | |
new atlas.data.Feature(new atlas.data.Point(startPoint), { | |
title: start, | |
iconImage: 'pin-blue' | |
}), | |
new atlas.data.Feature(new atlas.data.Point(endPoint), { | |
title: end, | |
iconImage: 'pin-red' | |
}) | |
]); | |
//Extract the traffic section data. | |
if (route.properties.sections) { | |
var sections = route.properties.sections; | |
var sectionLines = []; | |
//Route path could be a MultiLineString as multiple route legs (specify 3 or more waypoints) can result in multiple lines. | |
var routePath = route.geometry.coordinates[0]; | |
for (var i = 0; i < sections.length; i++) { | |
//Only worry about traffic sections with a magnitude delay of 1 (minor) or higher. | |
if (sections[i].sectionType === 'TRAFFIC' && sections[i].magnitudeOfDelay >= 1) { | |
//Create a line for the traffic section. | |
sectionLines.push(new atlas.data.Feature(new atlas.data.LineString( | |
//Get the coordinates from the route path for the section, startPointIndex...endPointIndex - add 1 as the end index is not included | |
routePath.slice(sections[i].startPointIndex, sections[i].endPointIndex + 1) | |
), sections[i])); | |
} | |
} | |
datasource.add(sectionLines); | |
} | |
//Update the map view to center over the route. | |
map.setCamera({ | |
bounds: data.bbox, | |
padding: 30 //Add a padding to account for the pixel size of symbols. | |
}); | |
} else { | |
alert('Unable to geocode end waypoint.'); | |
} | |
} else { | |
alert('Unable to geocode start waypoint.'); | |
} | |
} | |
function showPopup(e) { | |
//Make sure the event occurred on a shape feature. | |
if (e.shapes && e.shapes.length > 0) { | |
map.getCanvasContainer().style.cursor = 'pointer'; | |
var properties = e.shapes[0].getProperties(); | |
//Update the content and position of the popup. | |
popup.setOptions({ | |
//Create the content of the popup. | |
content: `<div style="padding:10px;"><b>${properties.simpleCategory}</b><br/>Speed: ${Math.round(properties.effectiveSpeedInKmh * 0.62137119)} mph</div`, | |
position: e.position | |
}); | |
//Open the popup. | |
popup.open(map); | |
} | |
} | |
function closePopup() { | |
popup.close(); | |
map.getCanvasContainer().style.cursor = 'grab'; | |
} | |
</script> | |
</head> | |
<body onload="GetMap()"> | |
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div> | |
<div style="position:absolute;top:15px;left:15px;background-color:white;padding:10px;border-radius:10px;"> | |
<table> | |
<tr> | |
<td>Start: </td> | |
<td><input type="text" id="startTbx" value="Seattle" /></td> | |
</tr> | |
<tr> | |
<td>End: </td> | |
<td><input type="text" id="endTbx" value="San Diego" /></td> | |
</tr> | |
<tr> | |
<td></td> | |
<td><input type="button" value="Calculate Route" onclick="calculateRoute()" /></td> | |
</tr> | |
</table> | |
</div> | |
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;"> | |
<legend><h1 style="font-size:16px">Show traffic along route</h1></legend> | |
This sample shows how to retrieve traffic information along a route using the <b>sectionType</b> option, and color the sections on the map. | |
</fieldset> | |
</body> | |
</html> |