-
Notifications
You must be signed in to change notification settings - Fork 435
/
mio.html
441 lines (370 loc) · 19.8 KB
/
mio.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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-Itinerary Optimization - 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 do a Multi-Itinerary Optimization with Azure Maps and the NVIDIA cuOpt optimizer service." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, spatial analysis, spatial join, fire, stop, route matrix, matrix, distance matrix, travel time, mio" />
<meta name="author" content="Microsoft Azure Maps" />
<meta name="version" content="2.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 Rest Helper JavaScript file. -->
<script src="https://samples.azuremaps.com/lib/azure-maps/azure-maps-helper.min.js"></script>
<script>
var map, stopDataSource, depotDataSource, routeDataSource;
var stops, depots, vehicles;
// Colors for the different routes.
var routeColors = ['#2272B9', '#ff7b25', '#6b5b95', '#d64161', '#00cc66', '#000000'];
// Your Azure Maps client id for accessing your Azure Maps account.
var azureMapsClientId = 'e6b6ab59-eb5d-4d25-aa57-581135b927f0';
// URL to your authentication service that retrieves an Microsoft Entra ID Token.
var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';
// URL for making async calls to the Azure Maps Route Matrix service.
var routeMatrixAsyncUrl = 'https://{azMapsDomain}/route/matrix/json?api-version=1.0&waitForResults=true';
// URL for the Azure Maps Route API.
var routeUrl = 'https://{azMapsDomain}/route/directions/json?api-version=1.0&query={query}&routeRepresentation=polyline&travelMode=car&view=Auto';
// Function to retrieve an Azure Maps access token.
function getToken(resolve, reject, map) {
fetch(tokenServiceUrl).then(response => {
if (response.ok) {
return response.text();
}
throw new Error('Failed to retrieve Azure Maps token.');
}).then(token => resolve(token)).catch(error => reject(error));
}
function getMap() {
// Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-105.076, 40.56],
zoom: 12,
style: 'grayscale_light',
view: 'Auto',
// Add authentication details for connecting to Azure Maps.
authOptions: {
// Use Microsoft Entra ID authentication.
authType: 'anonymous',
clientId: azureMapsClientId,
getToken: getToken
// 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 () {
// Load the custom image icon into the map resources.
map.imageSprite.add('home-icon', '/images/icons/home.png');
map.imageSprite.add('depot-icon', '/images/icons/factory.png');
// Add controls
map.controls.add(
[
new atlas.control.ZoomControl(),
new atlas.control.PitchControl(),
new atlas.control.CompassControl(),
new atlas.control.StyleControl({
mapStyles: "all"
})
],
{
position: "top-right"
}
);
// Download stop and depot location GeoJSON data.
Promise.all([
fetch('/data/geojson/mio_stops.json').then(response => response.json()),
fetch('/data/geojson/mio_depots.json').then(response => response.json()),
fetch('/data/geojson/mio_vehicles.json').then(response => response.json())
]).then(results => {
stops = results[0].features;
depots = results[1].features;
vehicles = results[2];
// Create a data source for stops.
stopDataSource = new atlas.source.DataSource();
map.sources.add(stopDataSource);
stopDataSource.add(stops);
// Create a data source for depots.
depotDataSource = new atlas.source.DataSource();
map.sources.add(depotDataSource);
depotDataSource.add(depots);
// Create a data source for routes.
routeDataSource = new atlas.source.DataSource();
map.sources.add(routeDataSource);
// Add rendering layers below labels.
map.layers.add([
// Add a line layer for rendering the route.
new atlas.layer.LineLayer(routeDataSource, 'routes', {
strokeColor: ['get', 'strokeColor'],
strokeWidth: 5,
strokeOpacity: 0.8,
lineJoin: 'round',
lineCap: 'round'
})
], 'labels');
// Add rendering layers above labels.
map.layers.add([
// Render an icon for each depot.
new atlas.layer.SymbolLayer(depotDataSource, 'depot', {
iconOptions: {
image: 'depot-icon',
size: 0.2,
anchor: "center",
allowOverlap: true,
ignorePlacement: true
}
}),
// Render a red icon for each stop.
new atlas.layer.SymbolLayer(stopDataSource, 'stops', {
iconOptions: {
image: 'home-icon',
size: 0.2,
anchor: "center",
allowOverlap: true,
ignorePlacement: true
}
})
]);
});
});
}
// Itinerary Optimization function
async function itineraryOptimizationClicked() {
// Show loading icon
showLoadingIcon(true);
// Clear the route data source
routeDataSource.clear();
// We need all coordinates together depots + stops
const allCoordinates = [...depots, ...stops];
// Get the Azure Maps Matrix results for all coordinates
const matrix = await getMatrixAsync(allCoordinates);
// We use the NVIDIA cuOpt optimizer service to calculate the Multi-Itinerary Optimization
// more details: https://docs.nvidia.com/cuopt/user-guide/supported-features.html
const solver = await getOptimizedRouteAsync(matrix);
// Render the route on the map for each vehicle using Azure Maps Route API
renderRoutes(allCoordinates, solver);
// Hide loading icon
showLoadingIcon(false);
}
// Function to show/hide the loading icon
function showLoadingIcon(visible) {
document.getElementById('loadingIcon').style.display = visible ? '' : 'none';
};
// Function to get the route matrix for all coordinates
async function getMatrixAsync(allCoordinates) {
// Create the request body to get a route matrix
var routeMatrixBody = {
origins: {
type: 'MultiPoint',
coordinates: allCoordinates.map(item => item.geometry.coordinates)
},
destinations: {
type: 'MultiPoint',
coordinates: allCoordinates.map(item => item.geometry.coordinates)
}
};
// Initiate an async route matrix request
var responseRouteMatrix = await processPostRequest(routeMatrixAsyncUrl, JSON.stringify(routeMatrixBody));
return responseRouteMatrix.matrix;
}
// Function to get the optimized routes
async function getOptimizedRouteAsync(matrix) {
// Function to convert hours to seconds
const convertHoursToSeconds = (hours) => hours * 60 * 60;
const stopslength = stops.length;
const depotslength = depots.length;
// Create the request body for the Multi-Itinerary Optimization
var optimizerBody = {
requestBody: {
data: {
"solver_config": {
"time_limit": 1 // This will limit the optimizer to give a response back in around a second reducing the processing time for this demo.
},
cost_matrix_data:
{
data:
{
// "1" = is the id for the vehicle_type_id
"1": matrix.map(row => row.map(item => item.response.routeSummary.lengthInMeters))
}
},
travel_time_matrix_data:
{
data:
{
// "1" = is the id for the vehicle_type_id
"1": matrix.map(row => row.map(item => item.response.routeSummary.travelTimeInSeconds))
}
},
fleet_data: {
// in this sample we have 4 vehicles,
// 2 vehicles for each depot (we have 2 depots)
vehicle_locations: vehicles.map(vehicle => vehicle.start_end_location_ids), // [start location in array Depot, stop location in array Depot]
vehicle_ids: vehicles.map(vehicle => vehicle.name), // the id for each vehicle
vehicle_types: vehicles.map(vehicle => vehicle.vehicle_type_id), // cost_matrix_data & travel_time_matrix_data data id "1"
capacities: [vehicles.map(vehicle => vehicle.capacity)], // the capacity for each vehicle
vehicle_time_windows: vehicles.map(vehicle => {
const workingHours = vehicle.working_hours;
return workingHours.map(convertHoursToSeconds);
}), // the time in seconds
vehicle_break_time_windows: [vehicles.map(vehicle => {
const breakHours = vehicle.break_time_window;
return breakHours.map(convertHoursToSeconds);
})], // the time in seconds
vehicle_break_durations: [vehicles.map(vehicle => convertHoursToSeconds(vehicle.break_duration))] // the time in seconds
},
task_data: {
task_locations: Array.from({ length: stopslength }, (_, index) => depotslength + index), // the index in array Stops. the first 2 stops are the depots and does not count as tasks
demand: [stops.map(stop => stop.properties.demand)], // the demand for each task/stop
task_time_windows: stops.map(stop => {
const openingHours = stop.properties.opening_hours;
return openingHours.map(convertHoursToSeconds);
}), // the time in seconds
service_times: stops.map(stop => convertHoursToSeconds(stop.properties.service_time)) // the time in seconds
}
},
client_version: "custom"
}
};
// URL for making calls to the NVIDIA optimizer service.
//var optimizerUrl = 'https://api.nvcf.nvidia.com/v2/nvcf/exec/functions/4bb2668d-c877-4b89-aabf-1630ed9b32c3/versions/471b94dc-931e-4aa1-99f4-935f5f352737';
var optimizerUrl = 'https://samples.azuremaps.com/api/optimizer'; // this is just demo data, use the real NVIDIA optimizer service
// Bearer token for the NVIDIA optimizer service.
var tokenResponse = await fetch('https://samples.azuremaps.com/api/GetMIOKey');
var token = await tokenResponse.text();
// Initiate an request to the NVIDIA optimizer service.
var optimizerResponse = await fetch(optimizerUrl, {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify(optimizerBody)
});
// Check if the response was successful.
if (!optimizerResponse.ok) {
throw new Error(`Network response was not ok: ${response.status} ${response.statusText}`);
}
// Get the data from the response.
var data = await optimizerResponse.json();
// Wait until the optimization is complete
while (data.percentComplete < 100) {
// sleep for 2 seconds
await new Promise(r => setTimeout(r, 2000));
// Get the status of the optimization.
var statusResponse = await fetch(`https://api.nvcf.nvidia.com/v2/nvcf/exec/status/${data.reqId}`, {
method: 'GET',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
}
});
// Check if the response was successful.
if (!statusResponse.ok) {
throw new Error(`Network response was not ok: ${response.status} ${response.statusText}`);
}
// Get the data from the response.
data = statusResponse.json();
}
return data.response.response.solver_response;
}
// Function to render the route on the map for each vehicle
function renderRoutes(allCoordinates, solver) {
// Index for the route colors
var index = 0;
// use the solver data to render the routes
for (var vehicle in solver.vehicle_data) {
// Get the vehicle data.
var car = solver.vehicle_data[vehicle];
// Create a string of coordinates for the route.
var coordinateString = "";
car.route.forEach(i => {
var coordinate = `${allCoordinates[i].geometry.coordinates[1]},${allCoordinates[i].geometry.coordinates[0]}`;
coordinateString += `${coordinate}:`;
});
// Remove the trailing colon
coordinateString = coordinateString.slice(0, -1);
// Create the route request with the query being the start and end point in the format 'startLongitude,startLatitude:endLongitude,endLatitude'.
var routeRequestURL = routeUrl
.replace('{query}', coordinateString);
// Process the request and render the route result on the map.
processRequest(routeRequestURL).then(directions => {
// Extract the first route from the directions.
const route = directions.routes[0];
// Combine all leg coordinates into a single array.
const routeCoordinates = route.legs.flatMap(leg => leg.points.map(point => [point.longitude, point.latitude]));
// Create a LineString from the route path points.
var routeLine = new atlas.data.LineString(routeCoordinates);
// Add it to the data source.
routeDataSource.add(new atlas.data.Feature(new atlas.data.LineString(routeCoordinates), {
// Set the stroke color of the route based on the vehicle color.
strokeColor: routeColors[index % routeColors.length]
}));
index++;
});
};
}
function loadText(url, elementId) {
fetch(url)
.then(response => response.text())
.then(data => {
document.getElementById(elementId).value = data;
})
.catch(error => console.error('Error:', error));
}
loadText('/data/geojson/mio_stops.json', 'textArea1');
loadText('/data/geojson/mio_depots.json', 'textArea2');
loadText('/data/geojson/mio_vehicles.json', 'textArea3');
</script>
<style>
.container {
display: flex;
justify-content: space-around;
margin: 0;
}
textarea {
width: 100%;
height: 400px;
margin: 0;
}
</style>
</head>
<body onload="getMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div style="position:absolute;top:10px;left:10px;background-color:#fff;padding:10px;border-radius:5px;">
<input type="button" value="Multi-Itinerary Optimization" onclick="itineraryOptimizationClicked()" />
</div>
<img id="loadingIcon" src="/images/loadingIcon.gif" title="Loading" style="position:absolute;left:calc(50% - 25px);top:250px;display:none;" />
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Multi-Itinerary Optimization</legend>
This example demonstrates the process of optimizing multiple itineraries using
<a href="https://azuremaps.com/" target="_blank">Azure Maps</a> in conjunction with
<a href="https://www.nvidia.com/en-us/ai-data-science/products/cuopt/" target="_blank">NVIDIA cuOpt</a>.
<br />
The scenario outlined includes 24 delivery points, 4 transport units, with each of the 2 storage hubs providing 2 vehicles.
<br />
<img src="/rest-services/mio/process.png" style="width:100%;" />
</fieldset>
<div class="container">
<div style="width: 33%;">
<h3>24 delivery points [stops]</h3>
<textarea id="textArea1" readonly="readonly"></textarea>
</div>
<div style="width: 33%;">
<h3>2 storage hubs [depots]</h3>
<textarea id="textArea2" readonly="readonly"></textarea>
</div>
<div style="width: 33%;">
<h3>4 transport units [vehicles]</h3>
<textarea id="textArea3" readonly="readonly"></textarea>
</div>
</div>
</body>
</html>