-
Notifications
You must be signed in to change notification settings - Fork 447
/
Calculate concentric isochrones.html
211 lines (172 loc) · 8.57 KB
/
Calculate concentric isochrones.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculate concentric isochrones - 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 calculate concentric isochrones and cut out overlapping areas so that they are nicely displayed." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, services, module, isochrone, isodistance, drive time polygon, reachable range, temporal, temporal analysis" />
<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>
<!-- 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>
<!-- Load turf.js a spatial math library. https://turfjs.org/ -->
<script src='/lib/turf.min.js'></script>
<script>
var map, datasource, routeURL, marker;
var colors = ['LawnGreen', 'Yellow', 'Orange', 'Red'];
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
style: 'grayscale_light',
center: [-73.985708, 40.75773],
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]'
}
});
//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
routeURL = new atlas.service.RouteURL(pipeline);
//Wait until the map resources are ready.
map.events.add('ready', function () {
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
map.layers.add([
//Create a polygon layer to render the isochrones.
new atlas.layer.PolygonLayer(datasource, null, {
fillColor: ['get', 'color']
}),
//Create a layer to outline the polygon areas.
new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'white'
})
], 'labels');
//Create a marker to show the center of the isochrones.
marker = new atlas.HtmlMarker({
position: map.getCamera().center,
draggable: true
});
map.events.add('dragend', marker, calculateIsochrones);
//Add the marker to the map.
map.markers.add(marker);
calculateIsochrones();
});
}
function calculateIsochrones() {
datasource.clear();
var origin = marker.getOptions().position;
Promise.all([
routeURL.calculateRouteRange(atlas.service.Aborter.timeout(10000), origin, {
timeBudgetInSec: 10 * 60
}),
routeURL.calculateRouteRange(atlas.service.Aborter.timeout(10000), origin, {
timeBudgetInSec: 15 * 60
}),
routeURL.calculateRouteRange(atlas.service.Aborter.timeout(10000), origin, {
timeBudgetInSec: 20 * 60
}),
routeURL.calculateRouteRange(atlas.service.Aborter.timeout(10000), origin, {
timeBudgetInSec: 25 * 60
})
]).then(values => {
//The values are order from shortest time to longest time, based on how we passed in the queries.
//Loop through each polygon isochrone and cut out the difference from the previous icochrone. Since the time increases with each isochrone, it should cover all area of the previous isochrone.
//The first isochrone is unchanged.
var prev = values[0].geojson.getFeatures().features[0];
prev.properties.color = colors[0];
//Ensure polygon rings are closed.
closePolygonRings(prev);
var polygons = [prev];
for (var i = 1; i < values.length; i++) {
var f = values[i].geojson.getFeatures().features[0];
//Ensure polygon rings are closed.
closePolygonRings(f);
//Subtract the previous isochrone from the current one.
var difference = turf.difference(f, prev);
difference.properties.color = colors[i];
polygons.push(difference);
prev = f;
}
if (polygons.length > 0) {
//Add the polygons to the data source.
datasource.add(polygons);
//Update the map camera to display the largest isochrone area.
map.setCamera({
bounds: atlas.data.BoundingBox.fromData(polygons[polygons.length - 1])
});
}
});
}
function closePolygonRings(polygon) {
//Ensure the first and last coordinate of each polygon ring are identical to form a closed polygon ring.
for (var i = 0; i < polygon.geometry.coordinates.length; i++) {
var ring = polygon.geometry.coordinates[i];
if (!atlas.data.Position.areEqual(ring[0], ring[ring.length - 1])) {
ring.push(ring[0]);
}
}
}
</script>
<style>
#myMap {
position: relative;
width: 100%;
min-width: 290px;
height: 600px;
}
.legend {
font-family: Arial;
font-size: 12px;
position: absolute;
top: 10px;
left: 10px;
background-color: #fff;
padding: 5px;
border-radius: 5px;
}
.legend i {
width: 12px;
height: 12px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
</head>
<body onload="getMap()">
<div id="myMap"></div>
<div class="legend">
<b>Travel time (minutes)</b>
<table>
<tr><td><i style='background:LawnGreen' /></td><td>10</td></tr>
<tr><td><i style='background:Yellow' /></td><td>15</td></tr>
<tr><td><i style='background:Orange' /></td><td>20</td></tr>
<tr><td><i style='background:Red' /></td><td>25</td></tr>
</table>
<div id="statusPanel"></div>
</div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Calculate concentric isochrones</legend>
This sample shows how to calculate concentric isochrones and cut out overlapping areas so that they are nicely displayed.
This sample uses the open source <a href="https://turfjs.org/" target="_blank">Turf.js</a> library to perform the difference calculation.
</fieldset>
</body>
</html>