Using ArcGIS JavaScript API Directions with embedded coordinates?

Question

I want to use ArcGis Javascript API for directions with the users current loaction as the start location, and a predetermined location as the stop destination. All the examples I can find use a widget for start and stop locations.

How can I set a predetermined location for the destination, and a current location for the start rather than using the widgets?

Answer 1

I cobbled together a few chunks of code that should help using the RouteTask suggested by @kes. I took code chunks from this ESRI Geolocation example and this ESRI RouteTask example.

My example uses a mouse click to set the destination location, and the geolocation results to set the starting point. You can use these principles to customize the code chunks for your needs.

This is not tested, nor is it complete code... It is here to illustrate the process in which something like this would be accomplished. Whatever you end up putting together, it would be great if you'd post the code to aid others.

If this is confusing, I suggest you take a look more through ESRI's JS API Documentation and through this info on callback functions.

 //in global namespace 
 var currentMapPoint;
 var lastStop;
 var routeSymbol;

 //in the  require function
 //be sure you import the modules
//require(["esri/tasks/RouteTask", "esri/tasks/RouteParameters"], RouteTask, RouteParameters) etc...


  //this is only adding a click even handler
 //your implementation will need to be much better than this
 //I am assuming you'll want your users to have some flexibility
 map.on("onClick", clickFunc);

 function clickFunc(evt) {
      if( navigator.geolocation ) {  

        //adjust your global with a new point for where your mouse clicked
        currentMapPoint = new Point(evt.mapPoint.x, evt.mapPoint.y);

        //set up the geolocation and call back
        navigator.geolocation.getCurrentPosition(routeLocation, locationError);
      } else {
        alert("Browser doesn't support Geolocation. Visit http://caniuse.com to see browser support for the Geolocation API.");
      }
    }

    function locationError(error) {
      //error occurred so stop watchPosition
      if( navigator.geolocation ) {
        navigator.geolocation.clearWatch(watchId);
      }
      switch (error.code) {
        case error.PERMISSION_DENIED:
          alert("Location not provided");
          break;

        case error.POSITION_UNAVAILABLE:
          alert("Current location not available");
          break;

        case error.TIMEOUT:
          alert("Timeout");
          break;

        default:
          alert("unknown error");
          break;
      }
    }

    function routeLocation(location) {
      //create your point geometry obejct
      var destinationPoint = new Point(location.coords.longitude, location.coords.latitude);

     //create your new route take
     //you'll need to make sure your server or service is capable of routing tasks
      routeTask = new RouteTask("YOUR ROUTING SERVICE URL");

    //setup the route parameters
    routeParams = new RouteParameters();
    routeParams.stops = new FeatureSet();
    routeParams.outSpatialReference = {
      "wkid" : 102100 //or whatever spatial ref your map is in
    };

    //set your call back handlers
    routeTask.on("solve-complete", showRoute);
    routeTask.on("error", errorHandler);               

    //define the symbology used to display the route
    //start symbol  
    startSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CROSS).setSize(15);
    startSymbol.outline.setWidth(4);
     var start = map.graphics.add(new Graphic(currentMapPoint, startSymbol));
     routeParams.stops.features.push(start);

    //stop symbol
    stopSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CROSS).setSize(15);
    stopSymbol.outline.setWidth(4);
     var stop = map.graphics.add(new Graphic(destinationPoint, stopSymbol));
     routeParams.stops.features.push(stop);

    //route symbol
    routeSymbol = new SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255, 0.5])).setWidth(5);

      //verify we have 2 points added
      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));
    }

    //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]);
    }



      var symbol = new SimpleMarkerSymbol(
        SimpleMarkerSymbol.STYLE_CIRCLE, 
        12, 
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID,
          new Color([210, 105, 30, 0.5]), 
          8
        ), 
        new Color([210, 105, 30, 0.9])
      );
      graphic = new Graphic(pt, symbol);
      map.graphics.add(graphic);
    }