Javascript - Beginner using Route

SteveLeFew · ‎07-28-2014

Hello Group!

I've been playing around with the software for a day or so, I have run through a few of the tutorials and a good amount of the documentation, but I know there are things I am missing.

My goal is to create some Javascript that will allow me to route a few points.

The code below is the best I can gather from the documentation/examples, but it's not working and I don't know where to go from here.

Any help or suggestions would be greatly appreciated.

Thanks,

-Steve

<!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>Directions Widget</title>

<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">

<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">

<style>

html, body, #map {

height:100%;

width:100%;

margin:0;

padding:0;

}

body {

background-color:#FFF;

overflow:hidden;

font-family:"Trebuchet MS";

}

</style>

<script src="http://js.arcgis.com/3.10/"></script>

<script>

routeTask = new esri.tasks.RouteTask("http://myServer/ArcGIS/rest/services/MyMapDoc/NAServer/MyRoute");

var stop1 = new esri.Graphic(

new esri.geometry.Point(-117.21, 34.065), stopSymbol);

stop1.attributes = new Object();

stop1.attributes.Name = "A";

var stop2 = new esri.Graphic(

new esri.geometry.Point(-117.185, 34.05 ), stopSymbol);

stop2.attributes = new Object();

stop2.attributes.Name = "B";

var stop3 = new esri.Graphic(

new esri.geometry.Point(-117.19, 34.062), stopSymbol);

stop3.attributes = new Object();

stop3.attributes.Name = "C";

routeParams = new esri.tasks.RouteParameters();

routeParams.stops = new esri.tasks.FeatureSet();

routeParams.stops.features.push(stop1);

routeParams.stops.features.push(stop2);

routeParams.stops.features.push(stop3);

routeParams.findBestSequence=true;

routeParams.preserveFirstStop=false;

routeParams.preserveLastStop=false;

routeParams.returnStops = true;

dojo.connect(routeTask, "onSolveComplete", showRoute);

dojo.connect(routeTask, "onError", errorHandler);

function showRoute(routeResults, barriers, gpMessages) {

for (var i = 0; i < gpMessages.length; i++)

alert(gpMessages.type + ": " + gpMessages.description);

map.graphics.add(routeResults[0].route.setSymbol(routeSymbol));

}

function errorHandler(err) {

alert("An error occured\n" + err.message +

"\n" + err.details.join("\n"));

}

</script>

</head>

<body class="claro">

<div data-dojo-type="dijit/layout/BorderContainer"

data-dojo-props="design:'headline', gutters:false"

style="width:100%;height:100%;">

<div data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'right'"

style="width:250px;">

<button onclick="routeTask.solve(routeParams)">Click me</button>

</div>

</body>

</html>

OwenEarley · ‎07-28-2014

Hi Steve,

One issue with the code is that the required ESRI API modules are not being loaded. A while ago ESRI changed the way that developers reference the required API modules:

// legacy
dojo.require("esri.map");
// AMD
require(["esri/map", ... ], function(Map, ... ){ ... });

More info available at Dojo and AMD.

It can be a bit confusing as some of the documentation still shows the legacy way of using the API - such as the Working with the Route Task page. Your example seems to be based on the code on this page.

The old way was to create a Route Task was:

var routeTask = new esri.tasks.RouteTask("http://tasks.arcgisonline.com/ArcGIS/rest/services/NetworkAnalysis/ESRI_Route_NA/NAServer/Route");

The new version of this would be:

require([
  "esri/tasks/RouteTask", ... 
], function(RouteTask, ... ) {
  var routeTask = new RouteTask("http://tasks.arcgisonline.com/ArcGIS/rest/services/NetworkAnalysis/ESRI_Route_NA/NAServer/Route");
  ...
});

I would suggest basing your code on this newer AMD style example from ESRI:

Find routes with barriers and multiple stops | ArcGIS API for JavaScript‌

Hope this helps,

Owen

www.spatialxp.com.au

SteveLeFew · ‎07-29-2014

Hi Owen,

Thank you for the help. When I view the live sample, everything seems to work. Stops and barriers are able to be placed. Routes are shown.

When I copy the same code to an html document of my own without modification, I am only able to place stops and barriers. The Routes do not show. I've added alert boxes so I see it making it through the SolveRoute() function, but they do not enter the ShowRoute() function.

This makes me think the 'solve-complete' is never getting triggered. However the 'error' functionality is also not getting triggered. I'm not sure how to debug this. Are there any other depreciated commands in this documentation that could be throwing things off?

Thanks,

-Steve

MarlaKostuk · ‎07-29-2014

Hi Steve,

I have attached a blog with some Javascript debugging tips. I hope that this can help identify your issue and what request is failing.

Also a couple of things to keep in mind and double check.

This particular sample utilizes the resource proxy. On line 48 of the sample the proxy is referenced. The proxyUrl is pointing to the path on that particular server (for example proxyUrl: "/sproxy"), although your proxy url could be much different (for example http://<servername>/DotNet/proxy.ashx).

The proxy is typically used when the request are quite large (2048 characters) and you need to use a Post rather than a Get request. It is also used if you want to have the application authenticate on your behalf.

Try downloading the resource proxy and follow the readme doc to configure it and then specify the new proxyURL on line 48 and add the serverUrl in the proxy.config

I have attached a couple of resources regarding the proxy page if you would like to take a closer look.

1. Using the proxy page

2. Working with secured resources

I hope this gets you on the right track!

Kind regards,

-Marla

OwenEarley · ‎07-29-2014

Marla is correct that the proxy setting would be causing the issue when attempting to run this from a local file. The proxy is only used for very large requests and you can comment it out for testing purposes:

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

However, in your live site you should use a proxy.

I have also noticed that when you run this sample from a local file you will be prompted for an ArcGIS Online account to use the ESRI World Route service.

You will either need to have an account or be running your own routing service on ArcGIS Server. If you are running your own service you would need to change the URL when creating the Route Task:

// This uses the ESRI routing service
routeTask = new RouteTask("http://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World");

Owen

www.spatialxp.com.au

Reynaldde_Castro · ‎03-04-2016

Has anyone tried using the travelMode parameter?