Route Task Assistance

[DavidColey]

Hello-
If anyone can provide assistance with the following code, that would be great.  The code works, a route is defined using our internal NA, but does not draw a graphic route upon returning results.  I feel certain I have mis-called the route results, and/or am not passing in graphics correctly.  Here is the code.  It is culled from the existing sample, I have attempted to update syntax to 1.9

var mapMain, routeTask, routeParams, stopSymbol, routeSymbol, lastStop;

// @formatter:off
require([
  "esri/map",
  "esri/geometry/Extent",
  "esri/graphic",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/tasks/FeatureSet",
  "esri/tasks/RouteTask",
  "esri/tasks/RouteParameters",
  "esri/tasks/RouteResult",
  "esri/units",


  "dojo/parser",
  "dojo/ready",
  "dojo/_base/Color",

  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane"],
  function(
    Map, Extent, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, FeatureSet, RouteTask, RouteParameters, RouteResult, Units,
    parser, ready, delcare, Color, BorderContainer, ContentPane
  ) {
  ready(function() {

mapMain = new Map("cpCenter", {
   basemap : "streets",
   extent : extentInitial,
   lods : myLods,
   showAttribution: false,
  });
 
  mapMain.on("click", addStop);
 
  routeTask = new RouteTask("https://ags2.scgov.net/arcgis/rest/services/ScOperational/RoutingService/NAServer/Route");
 
  routeParams = new RouteParameters();
        routeParams.attributeParameterValues = [{attributeName: "Oneway", parameterName: "Restriction Usage", value: "Prohibited"},
{attributeName: "RestrictedTurns", parameterName: "Restriction Usage", value: "Prohibited"}];
        routeParams.outSpatialReference = mapMain.SpatialReference;
        routeParams.returnRoutes = true;
        routeParams.returnStops = true;
        routeParams.returnDirections = true;
        routeParams.directionsLengthUnits = Units.MILES;
        routeParams.impedanceAttribute="Length";
        routeParams.stops = new FeatureSet();
       
        routeTask.on("solve-complete", showRoute);
        routeTask.on("error", errorHandler);

function addStop(evt) {
  stopSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CROSS, 20,
            new SimpleLineSymbol(
                SimpleLineSymbol.STYLE_SOLID,
                new Color([89, 95, 35]), 2
                ),
                new Color([130, 159, 83, 0.40])
                );
              
   var stop = new Graphic(evt.mapPoint, stopSymbol);
              mapMain.graphics.add(stop);
                routeParams.stops.features.push(stop);
  
   if (routeParams.stops.features.length >= 2) {
                   routeTask.solve(routeParams);
                   lastStop = routeParams.stops.features.splice(0, 1)[0];  //what does?
            }
   console.log(lastStop);
  }
function showRoute(solveResult) {
   routeSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([254, 0, 0]), 3);
   mapMain.graphics.add(solveResult.routeResults[0].route.setSymbol(routeSymbol));
       }

function errorHandler(err) {
        alert("An error occured\n" + err.message + "\n" + err.details.join("\n"));

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

});

Thanks
David

[SteveCole]

Your code looks like mine (I borrowed from a sample as well) but maybe you're trying to combine too many things together in your route symbol setup?

My (legacy) code is something like this:

function showRoute(solveResult) {
 routeSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([255,0,0,0.8])).setWidth(4);
 
 theRoute = solveResult.routeResults[0].route;
 theRoute.setSymbol(routeSymbol);
 map.graphics.add(theRoute);

Only big difference I see is that you combined a few lines of code into your mapMain.graphics.Add() line of code.

Steve

[DavidColey]

Thanks Steve,
What I'm finding is that the route is solving upon adding a third graphic, but the graphic route is not displaying on the map.  For some reason the line symbol is simply not returning as a graphic.  But thanks for looking at this.  No luck on my end with your fix, but I certainly appreicate it-
David

[JohnBradley]

Try this ... set the symbol before adding to the map.

function evtRouteComplete(route) {
    var routeSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([101, 0, 255, 0.75])).setWidth(5);
    var myNewExtent = route.routeResults[0].directions.extent;

    map.graphics.add(route.routeResults[0].route.setSymbol(routeSymbol));
    map.setExtent(myNewExtent, true);
}

[DavidColey · Accepted solution]

Hi all-
Turns out I had a bit of a 500 and a 400 error.  In the code below, we are calling in a local network analysis layer that has a different wkid than WebMercator, 2882 vs 3857.  So, because I was not explicity setting the outSpatialReference to a new outSpatialReference, the route graphic could not draw.  I also had a oversite with my onSolveComplete event callback.  Here is the functioning code:

routeTask = new RouteTask("https://ags2.scgov.net/arcgis/rest/services/ScOperational/RoutingService/NAServer/Route");
  //routeTask = new RouteTask("http://tasks.arcgisonline.com/ArcGIS/rest/services/NetworkAnalysis/ESRI_Route_NA/NAServer/Route");
 
  routeParams = new RouteParameters();
        routeParams.attributeParameterValues = [{attributeName: "Oneway", parameterName: "Restriction Usage", value: "Prohibited"},
                  {attributeName: "RestrictedTurns", parameterName: "Restriction Usage", value: "Prohibited"}];
       
        //routeParams.outSpatialReference = mapMain.SpatialReference;
        routeParams.outSpatialReference = new SpatialReference({"wkid": 3857}); //2882
        routeParams.returnRoutes = true;
        routeParams.returnStops = true;
        routeParams.returnDirections = true;
        routeParams.directionsLengthUnits = Units.MILES;
        routeParams.impedanceAttribute="Length";
        routeParams.stops = new FeatureSet();
       
        connect.connect(routeTask, "onSolveComplete", showRoute); //routeTask.on
        connect.connect(routeTask, "onError", errorHandler);

function addStop(evt) {
  stopSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CROSS, 15,
            new SimpleLineSymbol(
                SimpleLineSymbol.STYLE_SOLID,
                new Color([89, 95, 35]), 2
                ),
                new Color([130, 159, 83, 0.40])
                );
              
   var stop = new Graphic(evt.mapPoint, stopSymbol);
      mapMain.graphics.add(stop);
        routeParams.stops.features.push(stop);
  
   if (routeParams.stops.features.length >= 2) {
                   routeTask.solve(routeParams);
                   lastStop = routeParams.stops.features.splice(0, 1)[0];  //what does?
            }
   console.log(routeParams.stops.features.length);
}
function showRoute(solveResult) {
   routeSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([0, 0, 254]), 3);
   mapMain.graphics.add(solveResult.routeResults[0].route.setSymbol(routeSymbol));
   console.log(solveResult.routeResults[0].route);
}

function errorHandler(err) {
        alert("An error occured\n" + err.message + "\n" + err.details.join("\n")); 
        routeParams.stops.features.splice(0, 0, lastStop);  //what does?
        mapMain.graphics.remove(routeParams.stops.features.splice(1, 1)[0]);
    }

Thanks All