<!DOCTYPE html>
<html>
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="leaflet"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
<script src="script.js"></script>
</body>
</html>
body {
margin: 0;
}
html, body, #leaflet {
height: 100%
}
/*
* This is the json data passed from my controller
*/
var json = [
{
"vehicle": 1,
"cost": 1544,
"amount": [
7
],
"service": 0,
"duration": 1544,
"waiting_time": 0,
"distance": 15295,
"steps": [
{
"type": "start",
"location": [
-85.66989,
40.57513
],
"arrival": 61200,
"duration": 0,
"distance": 0
},
{
"type": "job",
"location": [
-85.68093,
40.54869
],
"job": 14,
"service": 0,
"waiting_time": 0,
"arrival": 61503,
"duration": 303,
"distance": 3760
},
{
"type": "job",
"location": [
-85.69013,
40.54604333
],
"job": 19,
"service": 0,
"waiting_time": 0,
"arrival": 61670,
"duration": 470,
"distance": 4869
},
{
"type": "job",
"location": [
-85.66627,
40.53604
],
"job": 16,
"service": 0,
"waiting_time": 0,
"arrival": 62042,
"duration": 842,
"distance": 7915
},
{
"type": "job",
"location": [
-85.66609,
40.53649
],
"job": 11,
"service": 0,
"waiting_time": 0,
"arrival": 62044,
"duration": 844,
"distance": 7930
},
{
"type": "job",
"location": [
-85.68587,
40.56227
],
"job": 13,
"service": 0,
"waiting_time": 0,
"arrival": 62408,
"duration": 1208,
"distance": 12331
},
{
"type": "job",
"location": [
-85.68034,
40.56146
],
"job": 25,
"service": 0,
"waiting_time": 0,
"arrival": 62511,
"duration": 1311,
"distance": 12892
},
{
"type": "job",
"location": [
-85.66989,
40.57513
],
"job": 1,
"service": 0,
"waiting_time": 0,
"arrival": 62744,
"duration": 1544,
"distance": 15295
},
{
"type": "end",
"location": [
-85.66989,
40.57513
],
"arrival": 62744,
"duration": 1544,
"distance": 15295
}
],
"geometry": "c{svFxk{iO@zJlEA@nGAtAGjAGr@OpB~@|@|AbAvAr@hA\\f@HxAJhABxDCbA?`BAzFCrFEpCApAApA?fAAjAAdA?jAAxAAfBArAAfBAzA?zAAvAAjAAxAEbBGvB?X?fB?~A@zA@|AAzAAxA?lB?nCAnB?tA?~AAvAAbB?|DObBWbBWnA|B`C`EzF|IH~J?|@?`AD~KjEArDDzEDF|WBvEDhIEiICwEG}WOuTImKGkKCiG?gDzF?zROlPIhEL?oAEaOAmBAqBAaN`FO?mD?c@?pEaFN@`N@pB@lBD`O?nAiEMmPH{RN{F?gDD}Ep@kEhAuBl@qBl@yEzAcBVcBV}DNcB?wA@_B@uA?oB?oC@mB?yA?{A@}A@{AA_BAgB?Y?wB?FxI@lIHhMDjL@bBBbHyDBiA@}A?wA@i@@h@AvAACgHAoBC_E?c@CwDzA?CyEEuFwABEoIEiI{A@{A?gB@sA@gB@yA@kA@eA?kA@gA@qA?qA@qC@sFD{FBaB@cA?yDBiACyAKg@IiA]wAs@}AcA_A}@NqBFs@FkA@uAAoGmE@A{J??"
},
{
"vehicle": 2,
"cost": 1362,
"amount": [
6
],
"service": 0,
"duration": 1362,
"waiting_time": 0,
"distance": 12586,
"steps": [
{
"type": "start",
"location": [
-85.66989,
40.57513
],
"arrival": 61200,
"duration": 0,
"distance": 0
},
{
"type": "job",
"location": [
-85.67212,
40.55852
],
"job": 22,
"service": 0,
"waiting_time": 0,
"arrival": 61427,
"duration": 227,
"distance": 2627
},
{
"type": "job",
"location": [
-85.66248,
40.55482
],
"job": 17,
"service": 0,
"waiting_time": 0,
"arrival": 61560,
"duration": 360,
"distance": 3842
},
{
"type": "job",
"location": [
-85.66240692,
40.55020523
],
"job": 24,
"service": 0,
"waiting_time": 0,
"arrival": 61665,
"duration": 465,
"distance": 4505
},
{
"type": "job",
"location": [
-85.65891,
40.55224
],
"job": 21,
"service": 0,
"waiting_time": 0,
"arrival": 61759,
"duration": 559,
"distance": 5072
},
{
"type": "job",
"location": [
-85.63844,
40.55476
],
"job": 26,
"service": 0,
"waiting_time": 0,
"arrival": 62050,
"duration": 850,
"distance": 7700
},
{
"type": "job",
"location": [
-85.66397,
40.563
],
"job": 23,
"service": 0,
"waiting_time": 0,
"arrival": 62362,
"duration": 1162,
"distance": 10659
},
{
"type": "end",
"location": [
-85.66989,
40.57513
],
"arrival": 62562,
"duration": 1362,
"distance": 12586
}
],
"geometry": "c{svFxk{iO@zJlEA@nGAtAGjAGr@OpB~@|@|AbAvAr@hA\\f@HxAJhABxDCbA?`BAzFCrFEpCApAApA?fAAjAAdA?jAAxAAfBArAAfBAzA?zAAvAAjAAxAEbBGvB?X?fB?E}IAsIx@?d@?|A??uB?cC@uB?uB?qB?oFAaC@eL?yCCkF~A?xA@xA?~A?tA@|A??uBx@?y@??wBrD?zA?zA?bA?pE?vA?|A?tD?@n@Ao@uD?}A?wA??mB?yB@iA?cBAeAAyFaA?sEAyA?yA?sD?{A?yA?yDAyA?_B?AuFBkF?aC@iC?uN?gC@gABcADgAFw@RiBJ{@Ly@ReALo@VaAj@eBhBiFtD{JmCUAa@?[?[@[BYHk@Pi@b@eA\\y@xGaOdC}FuCwBc@Yb@XtCvBeC|FyG`O]x@c@dAQh@Ij@CXAZ?Z?Z@`@cALg@Le@P[Ro@Xk@Po@Lc@Bu@@c@@IxAYjHG|AKpCGlB?rKEhH?pGBjE?v@?`BA|B@|EBvFCzF?|BArBAjF@hFwDA{A?wAA{AAyAAaCBa@v@Ub@cAnAIFmD~CeElDaDpBkAt@iEjCsDtCoLvJeAx@mL|IqJdH@uAAoGmE@A{J"
},
{
"vehicle": 3,
"cost": 2724,
"amount": [
7
],
"service": 0,
"duration": 2724,
"waiting_time": 0,
"distance": 32475,
"steps": [
{
"type": "start",
"location": [
-85.66989,
40.57513
],
"arrival": 61200,
"duration": 0,
"distance": 0
},
{
"type": "job",
"location": [
-85.63141,
40.4847
],
"job": 15,
"service": 0,
"waiting_time": 0,
"arrival": 62088,
"duration": 888,
"distance": 13077
},
{
"type": "job",
"location": [
-85.64685,
40.51005
],
"job": 3,
"service": 0,
"waiting_time": 0,
"arrival": 62401,
"duration": 1201,
"distance": 16862
},
{
"type": "job",
"location": [
-85.65415,
40.52775
],
"job": 27,
"service": 0,
"waiting_time": 0,
"arrival": 62701,
"duration": 1501,
"distance": 19873
},
{
"type": "job",
"location": [
-85.65212,
40.53737
],
"job": 7,
"service": 0,
"waiting_time": 0,
"arrival": 62889,
"duration": 1689,
"distance": 21151
},
{
"type": "job",
"location": [
-85.641635,
40.525478
],
"job": 6,
"service": 0,
"waiting_time": 0,
"arrival": 63150,
"duration": 1950,
"distance": 22946
},
{
"type": "job",
"location": [
-85.64129,
40.52481
],
"job": 5,
"service": 0,
"waiting_time": 0,
"arrival": 63161,
"duration": 1961,
"distance": 23025
},
{
"type": "job",
"location": [
-85.64617,
40.52437
],
"job": 4,
"service": 0,
"waiting_time": 0,
"arrival": 63262,
"duration": 2062,
"distance": 23631
},
{
"type": "end",
"location": [
-85.66989,
40.57513
],
"arrival": 63924,
"duration": 2724,
"distance": 32475
}
]
}
];
var jobs = Object.values(json);
var jobcoordinates = [];
for (i in jobs) {
jobcoordinates[i] = [];
steps = jobs[i].steps;
for (s in jobs[i].steps){
jobcoordinates[i].push(new L.Routing.Waypoint([jobs[i].steps[s].location[1], jobs[i].steps[s].location[0]]))
}};
console.log("jobcoordinates", jobcoordinates);
var mymap = new L.Map('leaflet', {
layers: [
new L.TileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
})
],
center: [40.575, -85.699],
zoom: 11
});
var router = new L.Routing.OSRMv1();
for (var i = 0; i < jobcoordinates.length; i++) {
router.route(jobcoordinates[i], function(err, routes) {
if (!err) {
L.routing.line(routes[0]).addTo(mymap);
}
else {
console.error("error!:",err);
}
});
}
// Compare jobcoordinates with routeWaypoints to see if they are the same...
var routeWaypoints = [
[new L.Routing.Waypoint([57.7, 11.9]), new L.Routing.Waypoint([57.73, 11.94])],
[new L.Routing.Waypoint([57.7, 11.94]), new L.Routing.Waypoint([57.8, 11.94])],
];
console.log("routeWaypoints",routeWaypoints);