I am trying to use VRP API from Arcgis. The API returns routes in response in json format. Can some guide me how to visualize these routes on map using Arcgis javascript API.
Here is the response json:
{
"paramName": "out_routes",
"dataType": "GPFeatureRecordSetLayer",
"value": {
"displayFieldName": "",
"geometryType": "esriGeometryPolyline",
"spatialReference": {
"wkid": 4326,
"latestWkid": 4326
},
"fields": [
{
"name": "ObjectID",
"type": "esriFieldTypeOID",
"alias": "ObjectID"
},
{
"name": "Name",
"type": "esriFieldTypeString",
"alias": "Name",
"length": 128
},
{
"name": "ViolatedConstraints",
"type": "esriFieldTypeInteger",
"alias": "ViolatedConstraints"
},
{
"name": "OrderCount",
"type": "esriFieldTypeInteger",
"alias": "OrderCount"
},
{
"name": "TotalCost",
"type": "esriFieldTypeDouble",
"alias": "TotalCost"
},
{
"name": "RegularTimeCost",
"type": "esriFieldTypeDouble",
"alias": "RegularTimeCost"
},
{
"name": "OvertimeCost",
"type": "esriFieldTypeDouble",
"alias": "OvertimeCost"
},
{
"name": "DistanceCost",
"type": "esriFieldTypeDouble",
"alias": "DistanceCost"
},
{
"name": "TotalTime",
"type": "esriFieldTypeDouble",
"alias": "TotalTime"
},
{
"name": "TotalOrderServiceTime",
"type": "esriFieldTypeDouble",
"alias": "TotalOrderServiceTime"
},
{
"name": "TotalBreakServiceTime",
"type": "esriFieldTypeDouble",
"alias": "TotalBreakServiceTime"
},
{
"name": "TotalTravelTime",
"type": "esriFieldTypeDouble",
"alias": "TotalTravelTime"
},
{
"name": "TotalDistance",
"type": "esriFieldTypeDouble",
"alias": "TotalDistance"
},
{
"name": "StartTime",
"type": "esriFieldTypeDate",
"alias": "StartTime",
"length": 16
},
{
"name": "EndTime",
"type": "esriFieldTypeDate",
"alias": "EndTime",
"length": 16
},
{
"name": "TotalWaitTime",
"type": "esriFieldTypeDouble",
"alias": "TotalWaitTime"
},
{
"name": "TotalViolationTime",
"type": "esriFieldTypeDouble",
"alias": "TotalViolationTime"
},
{
"name": "RenewalCount",
"type": "esriFieldTypeInteger",
"alias": "RenewalCount"
},
{
"name": "TotalRenewalServiceTime",
"type": "esriFieldTypeDouble",
"alias": "TotalRenewalServiceTime"
},
{
"name": "Shape_Length",
"type": "esriFieldTypeDouble",
"alias": "Shape_Length"
}
],
"features": [
{
"attributes": {
"ObjectID": 1,
"Name": "Truck_1",
"ViolatedConstraints": null,
"OrderCount": 2,
"TotalCost": 55.12577115597857,
"RegularTimeCost": 32.368821966275576,
"OvertimeCost": 0,
"DistanceCost": 22.756949189702993,
"TotalTime": 161.84410983137786,
"TotalOrderServiceTime": 49,
"TotalBreakServiceTime": 0,
"TotalTravelTime": 52.844109831377864,
"TotalDistance": 15.171299459801997,
"StartTime": 1355241600000,
"EndTime": 1355251310647,
"TotalWaitTime": 0,
"TotalViolationTime": 0,
"RenewalCount": 0,
"TotalRenewalServiceTime": 0,
"Shape_Length": 0.27770417275136994
},
"geometry": {
"paths": [
[
[
-122.39476499860575,
37.79623499914595
],
[
-122.39486000028876,
37.79632999992958
]
],
[
[
-122.46491587646648,
37.77469887205535
],
[
-122.4648300002043,
37.77348999976374
]
]
]
}
},
{
"attributes": {
"ObjectID": 2,
"Name": "Truck_2",
"ViolatedConstraints": null,
"OrderCount": 2,
"TotalCost": 58.98111973045911,
"RegularTimeCost": 31.262990736961367,
"OvertimeCost": 0,
"DistanceCost": 27.71812899349775,
"TotalTime": 156.31495368480682,
"TotalOrderServiceTime": 43,
"TotalBreakServiceTime": 0,
"TotalTravelTime": 53.314953684806824,
"TotalDistance": 18.478752662331832,
"StartTime": 1355241600000,
"EndTime": 1355250978897,
"TotalWaitTime": 0,
"TotalViolationTime": 0,
"RenewalCount": 0,
"TotalRenewalServiceTime": 0,
"Shape_Length": 0.30798071724323045
},
"geometry": {
"paths": [
[
[
-122.39476499860575,
37.79623499914595
],
[
-122.39486000028876,
37.79632999992958
]
],
[
[
-122.47389692820065,
37.74313425554152
],
[
-122.47462999977466,
37.74310000036479
]
]
]
}
},
{
"attributes": {
"ObjectID": 3,
"Name": "Truck_3",
"ViolatedConstraints": null,
"OrderCount": 2,
"TotalCost": 59.96986647554318,
"RegularTimeCost": 28.12653774395585,
"OvertimeCost": 0,
"DistanceCost": 31.843328731587327,
"TotalTime": 140.63268871977925,
"TotalOrderServiceTime": 38,
"TotalBreakServiceTime": 0,
"TotalTravelTime": 42.63268871977925,
"TotalDistance": 21.228885821058217,
"StartTime": 1355241600000,
"EndTime": 1355250037961,
"TotalWaitTime": 0,
"TotalViolationTime": 0,
"RenewalCount": 0,
"TotalRenewalServiceTime": 0,
"Shape_Length": 0.3486039472893737
},
"geometry": {
"paths": [
[
[
-122.39476499860575,
37.79623499914595
],
[
-122.39486000028876,
37.79632999992958
]
],
[
[
-122.44930025350385,
37.731549383197546
],
[
-122.45112999974964,
37.73153999967133
]
]
]
}
}
],
"exceededTransferLimit": false
}
}Here's one way to do it, assuming you're using the ArcGIS API for JavaScript version 4.2 (you can use a similar approach if you're still on 3.x).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>VRP Graphics</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
/**
* Require the modules needed to do the graphics. Don't forget to
* include them as function parameters a few lines down as well!
*/
"dojo/_base/array",
"esri/Graphic",
"esri/symbols/SimpleLineSymbol",
"dojo/domReady!"
], function(Map, MapView, array, Graphic, SimpleLineSymbol) {
/**
* You're getting the JSON from the VRP service. Here I'm just including
* your JSON response as a variable. You won't do this.
*/
var responseJson = { "paramName": "out_routes", "dataType": "GPFeatureRecordSetLayer", "value": { "displayFieldName": "", "geometryType": "esriGeometryPolyline", "spatialReference": { "wkid": 4326, "latestWkid": 4326 }, "fields": [ { "name": "ObjectID", "type": "esriFieldTypeOID", "alias": "ObjectID" }, { "name": "Name", "type": "esriFieldTypeString", "alias": "Name", "length": 128 }, { "name": "ViolatedConstraints", "type": "esriFieldTypeInteger", "alias": "ViolatedConstraints" }, { "name": "OrderCount", "type": "esriFieldTypeInteger", "alias": "OrderCount" }, { "name": "TotalCost", "type": "esriFieldTypeDouble", "alias": "TotalCost" }, { "name": "RegularTimeCost", "type": "esriFieldTypeDouble", "alias": "RegularTimeCost" }, { "name": "OvertimeCost", "type": "esriFieldTypeDouble", "alias": "OvertimeCost" }, { "name": "DistanceCost", "type": "esriFieldTypeDouble", "alias": "DistanceCost" }, { "name": "TotalTime", "type": "esriFieldTypeDouble", "alias": "TotalTime" }, { "name": "TotalOrderServiceTime", "type": "esriFieldTypeDouble", "alias": "TotalOrderServiceTime" }, { "name": "TotalBreakServiceTime", "type": "esriFieldTypeDouble", "alias": "TotalBreakServiceTime" }, { "name": "TotalTravelTime", "type": "esriFieldTypeDouble", "alias": "TotalTravelTime" }, { "name": "TotalDistance", "type": "esriFieldTypeDouble", "alias": "TotalDistance" }, { "name": "StartTime", "type": "esriFieldTypeDate", "alias": "StartTime", "length": 16 }, { "name": "EndTime", "type": "esriFieldTypeDate", "alias": "EndTime", "length": 16 }, { "name": "TotalWaitTime", "type": "esriFieldTypeDouble", "alias": "TotalWaitTime" }, { "name": "TotalViolationTime", "type": "esriFieldTypeDouble", "alias": "TotalViolationTime" }, { "name": "RenewalCount", "type": "esriFieldTypeInteger", "alias": "RenewalCount" }, { "name": "TotalRenewalServiceTime", "type": "esriFieldTypeDouble", "alias": "TotalRenewalServiceTime" }, { "name": "Shape_Length", "type": "esriFieldTypeDouble", "alias": "Shape_Length" } ], "features": [ { "attributes": { "ObjectID": 1, "Name": "Truck_1", "ViolatedConstraints": null, "OrderCount": 2, "TotalCost": 55.12577115597857, "RegularTimeCost": 32.368821966275576, "OvertimeCost": 0, "DistanceCost": 22.756949189702993, "TotalTime": 161.84410983137786, "TotalOrderServiceTime": 49, "TotalBreakServiceTime": 0, "TotalTravelTime": 52.844109831377864, "TotalDistance": 15.171299459801997, "StartTime": 1355241600000, "EndTime": 1355251310647, "TotalWaitTime": 0, "TotalViolationTime": 0, "RenewalCount": 0, "TotalRenewalServiceTime": 0, "Shape_Length": 0.27770417275136994 }, "geometry": { "paths": [ [ [ -122.39476499860575, 37.79623499914595 ], [ -122.39486000028876, 37.79632999992958 ] ], [ [ -122.46491587646648, 37.77469887205535 ], [ -122.4648300002043, 37.77348999976374 ] ] ] } }, { "attributes": { "ObjectID": 2, "Name": "Truck_2", "ViolatedConstraints": null, "OrderCount": 2, "TotalCost": 58.98111973045911, "RegularTimeCost": 31.262990736961367, "OvertimeCost": 0, "DistanceCost": 27.71812899349775, "TotalTime": 156.31495368480682, "TotalOrderServiceTime": 43, "TotalBreakServiceTime": 0, "TotalTravelTime": 53.314953684806824, "TotalDistance": 18.478752662331832, "StartTime": 1355241600000, "EndTime": 1355250978897, "TotalWaitTime": 0, "TotalViolationTime": 0, "RenewalCount": 0, "TotalRenewalServiceTime": 0, "Shape_Length": 0.30798071724323045 }, "geometry": { "paths": [ [ [ -122.39476499860575, 37.79623499914595 ], [ -122.39486000028876, 37.79632999992958 ] ], [ [ -122.47389692820065, 37.74313425554152 ], [ -122.47462999977466, 37.74310000036479 ] ] ] } }, { "attributes": { "ObjectID": 3, "Name": "Truck_3", "ViolatedConstraints": null, "OrderCount": 2, "TotalCost": 59.96986647554318, "RegularTimeCost": 28.12653774395585, "OvertimeCost": 0, "DistanceCost": 31.843328731587327, "TotalTime": 140.63268871977925, "TotalOrderServiceTime": 38, "TotalBreakServiceTime": 0, "TotalTravelTime": 42.63268871977925, "TotalDistance": 21.228885821058217, "StartTime": 1355241600000, "EndTime": 1355250037961, "TotalWaitTime": 0, "TotalViolationTime": 0, "RenewalCount": 0, "TotalRenewalServiceTime": 0, "Shape_Length": 0.3486039472893737 }, "geometry": { "paths": [ [ [ -122.39476499860575, 37.79623499914595 ], [ -122.39486000028876, 37.79632999992958 ] ], [ [ -122.44930025350385, 37.731549383197546 ], [ -122.45112999974964, 37.73153999967133 ] ] ] } } ], "exceededTransferLimit": false } };
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 14,
center: [-122.452, 37.750]
});
/**
* Create a line symbol for the graphics.
*/
var lineSymbol = new SimpleLineSymbol({
color: [255, 255, 0],
width: 4
});
/**
* Loop through the JSON object's value.features array. For each one,
* create a Graphic and add it to the map.
*/
array.forEach(responseJson.value.features, function (feature) {
feature.symbol = lineSymbol;
var graphic = Graphic.fromJSON(feature);
graphic.symbol = lineSymbol;
view.graphics.add(graphic);
}, this);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>