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.
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
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>
replace line 104 with this
dojo.byId("length999").innerHTML = evt.result.routeResults[0].route.attributes.Shape_Length + "feet";
You can remove line 107.
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
Tom,
that is the nice thing in programming there are always different options to do the same task
Tim
Tim,
I absolutely agree!
Regards,
Tom
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
Tom is right, I wonder in what unit the shape length is?
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