topic Re: Easily display route length? in ArcGIS JavaScript Maps SDK Questions

Easily display route length?

BenCamp — Mon, 08 Jun 2015 15:41:31 GMT

Is there an easy way to modify this sample to display the route length? I've been working on this for a couple days and can't seem to get the length to display. Thanks in advance for your help.

Simple Routing

Re: Easily display route length?

TomSellsted — Mon, 08 Jun 2015 15:52:36 GMT

Ben,

Yes! The result contains a polyline. You can add a reference to the geometryEngine and calculate the length of the polyline using the geodesicLength method. Something like this:

var routeLength = geometryEngine.geodesicLength(evt.results.routeResults[0].route.geometry);

You can also specify the UNITS that the length will return from the calculation or it will use the default from the geometry used. In this case meters.

You can find out more about it here:

esri/geometry/geometryEngine | API Reference | ArcGIS API for JavaScript

Regards,

Tom

Re: Easily display route length?

BAXTERQ_ANDREWS — Mon, 08 Jun 2015 16:05:38 GMT

Hi Idaho! Me Bronco!

Re: Easily display route length?

BenCamp — Sat, 11 Dec 2021 15:44:41 GMT

Tom

Thank you for the very helpful response. Would you mind pointing out where I've tripped up?

Thanks again for the assistance.

Ben

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Simple Routing</title>


    <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    
    <script src="http://js.arcgis.com/3.13/"></script>
    <script>
      require([
        "esri/urlUtils",
        "esri/map",
        "esri/graphic",            
        "esri/tasks/RouteTask",            
        "esri/tasks/RouteParameters",
        "esri/geometry/geometryEngine",


        "esri/tasks/FeatureSet",            
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",          


        "esri/Color",
        "dojo/on",
        "dijit/registry",


        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/form/HorizontalSlider",
        "dijit/form/HorizontalRuleLabels"
      ], function (
        urlUtils, Map, Graphic, RouteTask, RouteParameters, geometryEngine,
        FeatureSet, SimpleMarkerSymbol, SimpleLineSymbol,           
        Color, on, registry
      ) {
        var map, routeTask, routeParams;
        var stopSymbol, routeSymbol, lastStop;
        


        urlUtils.addProxyRule({
          urlPrefix: "route.arcgis.com",  
          proxyUrl: "/sproxy/"
        });
        
        map = new Map("map", {
            basemap : "streets",
            center : [-117.195, 34.057],
            zoom : 14
          });


        map.on("click", addStop);    
        


        routeTask = new RouteTask("http://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World");


        //setup the route parameters
        routeParams = new RouteParameters();
        routeParams.stops = new FeatureSet();
        routeParams.outSpatialReference = {
          "wkid" : 102100
        };


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


        //define the symbology used to display the route
        stopSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CROSS).setSize(15);
        stopSymbol.outline.setWidth(4);
        routeSymbol = new SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255, 0.5])).setWidth(5);


        //Adds a graphic when the user clicks the map. If 2 or more points exist, route is solved.
        function addStop(evt) {
          var stop = map.graphics.add(new Graphic(evt.mapPoint, stopSymbol));
          routeParams.stops.features.push(stop);


          if (routeParams.stops.features.length >= 2) {
            routeTask.solve(routeParams);
            lastStop = routeParams.stops.features.splice(0, 1)[0];
            }
                      }


        //Adds the solved route to the map as a graphic
        function showRoute(evt) {
          map.graphics.add(evt.result.routeResults[0].route.setSymbol(routeSymbol));


          dojo.byId("length999").innerHTML = routeLength[0] + "feet";
          
        };
        var routeLength = geometryEngine.geodesicLength(evt.results.routeResults[0].route.geometry);
        
        
        


        
        
        


        //Displays any error returned by the Route Task
        function errorHandler(err) {
          alert("An error occured\n" + err.message + "\n" + err.details.join("\n"));


          routeParams.stops.features.splice(0, 0, lastStop);
          map.graphics.remove(routeParams.stops.features.splice(1, 1)[0]);
        }
        
        




       });
    </script>


  </head>
  <body class="claro">
    <div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
     <p>Click on the map to add stops to the route. The route from the last stop to the newly added stop is calculated. If a stop is not reachable, it is removed and the last valid point is set as the starting point.</p>
     Length:<span id="length999"></span>
  </body>
</html>

Re: Easily display route length?

BenCamp — Mon, 08 Jun 2015 18:45:21 GMT

BAXTER Q ANDREWS wrote:
Hi Idaho! Me Bronco!

Go Vandals!

Re: Easily display route length?

TimWitt2 — Mon, 08 Jun 2015 18:54:43 GMT

replace line 104 with this

dojo.byId("length999").innerHTML = evt.result.routeResults[0].route.attributes.Shape_Length + "feet";

You can remove line 107.

Re: Easily display route length?

TomSellsted — Mon, 08 Jun 2015 19:04:00 GMT

Ben,

Tim is correct! My apologies, you really don't need the geometryEngine. With the attributes you have length specified in many ways. There are attributes for Total_Kilometers and Total_Miles.

Regards,

Tom

Re: Easily display route length?

TimWitt2 — Mon, 08 Jun 2015 19:07:19 GMT

Tom,

that is the nice thing in programming there are always different options to do the same task

Tim

Re: Easily display route length?

TomSellsted — Mon, 08 Jun 2015 19:09:37 GMT

Tim,

I absolutely agree!

Regards,

Tom

Re: Easily display route length?

TomSellsted — Mon, 08 Jun 2015 19:11:32 GMT

Ben,

I am not sure that the Shape_Length is in feet... I have been comparing it to the Total_Miles and Total_Kilometers and they don't calculate as expected. Just wanted you to know...

Regards,

Tom

Re: Easily display route length?

TimWitt2 — Mon, 08 Jun 2015 19:20:30 GMT

Tom is right, I wonder in what unit the shape length is?

Re: Easily display route length?

TomSellsted — Mon, 08 Jun 2015 19:28:42 GMT

Tim,

I thought it might be meters, but that doesn't calculate properly either. I tried to look at the services directory for routing to see if might show what the default units are and it has been disabled.

http://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World

Regards,

Tom

Re: Easily display route length?

TimWitt2 — Mon, 08 Jun 2015 19:37:14 GMT

Use Tom's approach then and move line 107 to line 103 and also on line 104 replace routeLength[0] with just routeLength

Re: Easily display route length?

BenCamp — Mon, 08 Jun 2015 20:01:30 GMT

Thanks guys. I just put 'feet' in there as a placeholder as my app will be in feet. I'm not sure about the ESRI sample.

Re: Easily display route length?

BenCamp — Mon, 08 Jun 2015 22:43:31 GMT

I assume that it's in meters but using the web mercator projection so all the measurements are fubar

Re: Easily display route length?

TomSellsted — Mon, 08 Jun 2015 23:35:15 GMT

It may be a difference between a geodesic measure and planar, but I am only guessing!

Regards,

Tom