How to draw routes on arcgis map using javascript API?

Question

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
    }
}

Answer 1

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>

Answer 2

Have a look at this sample page.

If that is what you're looking for the github project can be found here.

It's a non-trivial solution and hard to summarize it. I suggest studying the source code.