Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<title>Traffic control options - 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 use options with the traffic control. Users can use the traffic control to toggle traffic on and off in the map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, traffic, layer, flow, incidents" />
<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>
<script type='text/javascript'>
var map, trafficControl;
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//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 = '';
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 () {
//Add a traffic legend. It will automatically appear whenever the map is displaying traffic flow data. This can be used on its own with the map or with the traffic toggle button control like in this sample.
map.controls.add(new atlas.control.TrafficLegendControl(), { position: 'bottom-left' });
function reloadTrafficControl() {
if (trafficControl) {
//Reset traffic in the map.
map.setTraffic({ flow: 'none', incidents: false });
var elm = document.getElementById('flowOptions');
var flowOption = elm.options[elm.selectedIndex].value;
elm = document.getElementById('styleOptions');
var styleOption = elm.options[elm.selectedIndex].value;
//Create a traffic control to let the user easily turn the traffic on an off.
trafficControl = new atlas.control.TrafficControl({
flow: flowOption,
* Whether to display incidents on the map.
* default `true`
* @default true
incidents: document.getElementById('incidentOption').checked,
* Specifies if the control is in the active state (displaying traffic).
* Default: false
* @default false
// isActive: document.getElementById('isActive').checked,
* The style of the control. Can be; light, dark, auto, or any CSS3 color. When set to auto, the style will change based on the map style.
* Default `light'.
* @default light
style: styleOption
map.controls.add(trafficControl, {
position: 'top-right'
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div style="background-color:white;padding:10px;position:absolute;top:0;left:0;max-width:250px;">
Change an option then press the traffic control button on the right side of the map.<br /><br />
Incidents: <input id="incidentOption" type="checkbox" checked="checked" onclick="reloadTrafficControl()" /><br /><br />
<!--Is active: <input id="isActive" type="checkbox" onclick="reloadTrafficControl()" /><br /><br />-->
<select id="flowOptions" onchange="reloadTrafficControl()">
<option value="none">none</option>
<option value="relative" selected="selected">relative</option>
<option value="absolute">absolute</option>
<option value="relative-delay">relative-delay</option>
<br /><br />
Traffic control style:
<select id="styleOptions" onchange="reloadTrafficControl()">
<option value="dark">dark</option>
<option value="light" selected="selected">light</option>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Traffic control options</h1></legend>
This sample shows how to use options with the traffic control. Users can use the traffic control to toggle traffic on and off in the map.