-
Notifications
You must be signed in to change notification settings - Fork 442
/
Traffic control options.html
132 lines (108 loc) · 5.86 KB
/
Traffic control options.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<title>Traffic control options - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<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" /><meta name="version" content="1.0" />
<meta name="screenshot" content="screenshot.jpg" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script>
var map, trafficControl;
function getMap() {
//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 Microsoft Entra ID authentication.
authType: 'anonymous',
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Microsoft Entra ID Token.
var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';
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]'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
reloadTrafficControl();
//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) {
map.controls.remove(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'
});
}
</script>
</head>
<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 />-->
Flow:
<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>
</select>
<br /><br />
Traffic control style:
<select id="styleOptions" onchange="reloadTrafficControl()">
<option value="dark">dark</option>
<option value="light" selected="selected">light</option>
</select>
</div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Traffic control options</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.
</fieldset>
</body>
</html>