nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Display Total time and Total distance from route

HeathAnderson

I am working on a Java App where you can input more than two stops and solve for a route. All I want is to return is the Total time and Total Distance from the route as text on the screen. I don't know the code to do this for 2+ stops in a route service. Can some one please point me in the right direction.

Finde mehr Beiträge mit dem Tag

Accepted answers

JonathanUihlein

Hi Heath!

According to the documentation, routeTask.solve() returns a deferred.

https://developers.arcgis.com/javascript/jsapi/routetask-amd.html

Because of this, you can use .then() to trigger a callback function with the results from your solve.

             function solveRoute() {                 removeEventHandlers();                 routeTask.solve(routeParams).then(function(results){                    var totalDriveTime = results.routeResults[0].directions.totalDriveTime;                   var totalLength = results.routeResults[0].directions.totalLength;                   var totalTime = results.routeResults[0].directions.totalTime;                                      alert("Distance : "+totalLength+" miles\nEstimated Time : "+totalDriveTime+" minutes");                  });                 //alert("Distance : 3 miles\nEstimated Time : 60 minutes");              }

"results" is an object that represents the response of the solve request. This is where you will access your solve data.
Notice how the alert is called inside the callback function.

The "results" object has tons of information regarding the solve.
Below is an example function that logs certain properties to the console.

            function solveRoute() {                 removeEventHandlers();                 routeTask.solve(routeParams).then(function(results){                                    console.log("results", results);                   console.log("results.routeResults[0]", results.routeResults[0]);                   console.log("results.routeResults[0].route", results.routeResults[0].route);                   console.log("results.routeResults[0].directions", results.routeResults[0].directions);                                      console.log("results.routeResults[0].directions.totalDriveTime", results.routeResults[0].directions.totalDriveTime);                   console.log("results.routeResults[0].directions.totalLength", results.routeResults[0].directions.totalLength);                   console.log("results.routeResults[0].directions.totalTime", results.routeResults[0].directions.totalTime);                                      console.log("results.routeResults[0].directions.summary", results.routeResults[0].directions.summary);                   console.log("results.routeResults[0].directions.summary.envelope", results.routeResults[0].directions.summary.envelope);                                    });              }

Hope this helps. Let me know if you have any questions.

All comments

ThavitinaiduGulivindala

Have a loot at "accumulateAttributeNames" section in the below link
http://resources.arcgis.com/en/help/arcgis-rest-api/index.html#//02r300000036000000

HeathAnderson

I have the accumulate attribute names set to "Minutes" and "Miles". What i can't seem to figure out is what code is needed to get those attributes to display in a text box or in an alert.

Here is my code

[HTML]<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Multiple Routes</title>

    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dgrid/css/dgrid.css">
    <script src="//js.arcgis.com/3.8/"></script>

    <style>
        html, body, #map {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #LocateButton {
            position: absolute;
            top: 95px;
            left: 20px;
            z-index: 50;
        }

        #ParkRec, a, img {
            float: right;
            height: inherit;
            border: none;
        }

        #footer {
            position: absolute;
            bottom: 0px;
            width: 100%;
            height: 45px;
            z-index: 50;
            background-color: rgba(0, 63, 94, 0.7);
        }

        footer, #buttons {
            position: absolute;
            bottom: 25%;
            left: 20px;
            z-index: inherit;

        }
        #dialog {
          top: 15px;
          right: 15px;
          position: absolute;
          padding: 5px;
          width: 380px;
          background-color: #ffffff;
          border-radius: 5px;
          margin: 8px;
          box-shadow: 0px 1px 3px #888;
        }
        #dialog input{
          margin: 0.5em;
          width: 20em;
        }
        #grid{
          overflow-x:hidden;
          overflow-y:auto;
        }
        input#directions {
          margin: 0.5em auto;
          width: 8em;
          display: block;
        }
        .dgrid-row{
          padding:5px;
          margin-bottom:5px;
          min-height:50px;
          border-bottom: solid 1px #C0C0C0;
        }
        .dgrid-row .detail div {
          cursor: pointer;
        }
        .dgrid-row .detail div:hover{
          text-decoration:underline;
        }
        .distance{
          float:right;
          color:#C0C0C0;
          font-style:italic;
        }
    </style>

    <script>
        var map;

        require([
          "esri/urlUtils",
          "esri/config",
          "esri/map",
          "esri/SpatialReference",
          "esri/dijit/LocateButton",

          "esri/tasks/RouteTask",
          "esri/tasks/RouteParameters",
          "esri/tasks/RouteResult",
          "esri/tasks/FeatureSet",
          "esri/units",
          "esri/dijit/Directions",
          "esri/tasks/DirectionsFeatureSet",
          "esri/layers/ArcGISDynamicMapServiceLayer",

          "esri/graphic",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",

          "dojo/_base/Color",
          "dojo/_base/array",
          "dojo/on",
          "dojo/dom",
          "dojo/dom-construct",
          "dojo/number",
          "dgrid/Grid",
          "dijit/registry",

          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dijit/form/HorizontalSlider",
          "dijit/form/HorizontalRuleLabels",

          "dojo/domReady!"
        ], function (
          urlUtils, esriConfig, Map, SpatialReference, LocateButton, RouteTask, RouteParameters, RouteResult, FeatureSet, esriUnits, Directions, DirectionsFeatureSet, ArcGISDynamicMapServiceLayer,
          Graphic, SimpleMarkerSymbol, SimpleLineSymbol,
          Color, array, on, dom, domConstruct, number, Grid, registry
        ) {
            var routeTask, routeParams, routes = [], segmentGraphic, directionFeatures, grid;
            var stopSymbol, barrierSymbol, routeSymbols;
            var mapOnClick_addStops_connect;

            urlUtils.addProxyRule({
                urlPrefix: "route.arcgis.com",
                proxyUrl: "/sproxy"
            });

            map = new Map("map", {
                basemap: "streets",
                center: [-88.4017, 44.2656],
                zoom: 13,
                logo: false
            });

            geoLocate = new LocateButton({
                map: map
            }, "LocateButton");
            geoLocate.startup();

            var layerTrails = new ArcGISDynamicMapServiceLayer("http://gis.appleton.org/arcgis/rest/services/Routing/ParkRouter_Paths/MapServer");
            map.addLayer(layerTrails);

            routeTask = new RouteTask("http://gis.appleton.org/arcgis/rest/services/Routing/ParkRouter/NAServer/Route");
            routeParams = new RouteParameters();
            routeParams.stops = new FeatureSet();
            routeParams.outSpatialReference = { "wkid": 102100 };
            routeParams.returnRoutes = true;
            routeParams.returnDirections = true;

            routeTask.on("solve-complete", showRoute);
            routeTask.on("error", errorHandler);

            stopSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CIRCLE).setSize(15);
            stopSymbol.setColor(new dojo.Color([41, 196, 10, 1.0]));
            stopSymbol.outline.setWidth(0);

            routeSymbols = new SimpleLineSymbol().setColor(new Color([27, 128, 6, 1.0])).setWidth(4);

            //button click event listeners can't be added directly in HTML when the code is wrapped in an AMD callback
            on(dom.byId("addStopsBtn"), "click", addStops);
            on(dom.byId("clearStopsBtn"), "click", clearStops);
            on(dom.byId("solveRoutesBtn"), "click", solveRoute);
            on(dom.byId("clearRoutesBtn"), "click", clearRoutes);

            //Begins listening for click events to add stops
            function addStops() {
                removeEventHandlers();
                mapOnClick_addStops_connect = map.on("click", addStop);
            }

            //Clears all stops
            function clearStops() {
                removeEventHandlers();
                for (var i = routeParams.stops.features.length - 1; i >= 0; i--) {
                    map.graphics.remove(routeParams.stops.features.splice(i, 1)[0]);
                }
            }

            //Adds a stop. The stop is associated with the route currently displayed in the dropdown
            function addStop(evt) {
                routeParams.stops.features.push(
                  map.graphics.add(
                    new esri.Graphic(
                      evt.mapPoint,
                      stopSymbol,
                      { RouteName: dom.byId(routeSymbols).value }
                    )
                  )
                );
            }

            //Stops listening for click events to add barriers and stops (if they've already been wired)
            function removeEventHandlers() {
                if (mapOnClick_addStops_connect) {
                    mapOnClick_addStops_connect.remove();
                }
            }

            //Solves the routes. Any errors will trigger the errorHandler function.
            function solveRoute() {
                removeEventHandlers();
                routeTask.solve(routeParams);
                alert("Distance : 3 miles\nEstimated Time : 60 minutes");

            }

            //Clears all routes
            function clearRoutes() {
                for (var i = routes.length - 1; i >= 0; i--) {
                    map.graphics.remove(routes.splice(i, 1)[0]);
                }
                routes = [];
            }

            //Draws the resulting routes on the map
            function showRoute(evt) {
                clearRoutes();

                array.forEach(evt.result.routeResults, function (routeResult, i) {
                    routes.push(
                      map.graphics.add(
                        routeResult.route.setSymbol(routeSymbols)
                      )
                    );
                });

                var msgs = ["Server messages:"];
                array.forEach(evt.result.messages, function (message) {
                    msgs.push(message.type + " : " + message.description);
                });
                if (msgs.length > 1) {
                    alert(msgs.join("\n - "));
                }

            }

            //Reports any errors that occurred during the solve
            function errorHandler(err) {
                alert("An error occured\n" + err.message + "\n" + err.details.join("\n"));
            }

        });

    </script>



</head>
<body>
    <div id="footer">
        <div id="buttons">
            <button id="addStopsBtn">Add Stops</button>
            <button id="clearStopsBtn">Clear Stops</button>
            <button id="solveRoutesBtn">Solve Routes</button>
            <button id="clearRoutesBtn">Clear Routes</button>
        </div>
    </div>
    <div id="map" class="map">
        <div id="LocateButton"></div>
    </div>
    <div id="dialog">
      <div id="directionsDetail" style="clear:both;">
        <div id="grid"></div>
      </div>
    </div>
</body>
</html>[/HTML]

JonathanUihlein

             function solveRoute() {                 removeEventHandlers();                 routeTask.solve(routeParams).then(function(results){                    var totalDriveTime = results.routeResults[0].directions.totalDriveTime;                   var totalLength = results.routeResults[0].directions.totalLength;                   var totalTime = results.routeResults[0].directions.totalTime;                                      alert("Distance : "+totalLength+" miles\nEstimated Time : "+totalDriveTime+" minutes");                  });                 //alert("Distance : 3 miles\nEstimated Time : 60 minutes");              }

            function solveRoute() {                 removeEventHandlers();                 routeTask.solve(routeParams).then(function(results){                                    console.log("results", results);                   console.log("results.routeResults[0]", results.routeResults[0]);                   console.log("results.routeResults[0].route", results.routeResults[0].route);                   console.log("results.routeResults[0].directions", results.routeResults[0].directions);                                      console.log("results.routeResults[0].directions.totalDriveTime", results.routeResults[0].directions.totalDriveTime);                   console.log("results.routeResults[0].directions.totalLength", results.routeResults[0].directions.totalLength);                   console.log("results.routeResults[0].directions.totalTime", results.routeResults[0].directions.totalTime);                                      console.log("results.routeResults[0].directions.summary", results.routeResults[0].directions.summary);                   console.log("results.routeResults[0].directions.summary.envelope", results.routeResults[0].directions.summary.envelope);                                    });              }

Hope this helps. Let me know if you have any questions.

HeathAnderson

Awesome. I understand now. Thanks for your help.

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.