AnsweredAssumed Answered

How to change the Route Direction when click on button Car/Truck/Walking

Question asked by nagrale on Mar 26, 2015

<!DOCTYPE html>



  <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>Driving Directions</title>


  <link rel="stylesheet" href="">

  <link rel="stylesheet" href="">

  <link rel="stylesheet" href="">


    html,body {

      font-family: Arial,Helvetica,sans-serif;




    #map {




    #dialog {

      top: 15px;

      right: 15px;

      position: absolute;

      padding: 5px;

      width: 380px;

      background-color: #ffffff;

      border-radius: 5px;

      margin: 8px;

      box-shadow: 0px 1px 3px #888;


    #dialog input{

      margin: 0.5em;

      width: 20em;






    input#directions {

      margin: 0.5em auto;

      width:  8em;

      display: block;






      border-bottom: solid 1px #C0C0C0;


    .dgrid-row .detail div {

      cursor: pointer;


    .dgrid-row .detail div:hover{









  <script src=""></script>


    var map;



      "esri/map", "esri/tasks/locator", "esri/SpatialReference",

      "esri/tasks/RouteTask", "esri/tasks/RouteParameters",

      "esri/tasks/FeatureSet", "esri/units", "esri/config", "esri/lang",

      "esri/symbols/PictureMarkerSymbol", "esri/graphic",



      "dojo/promise/all", "dojo/_base/array", "esri/Color",

      "dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/number",

      "dgrid/Grid", "dojo/domReady!"

    ], function(

      Map, Locator, SpatialReference,

      RouteTask, RouteParameters,

      FeatureSet, esriUnits, esriConfig, esriLang,

      PictureMarkerSymbol, Graphic,



      all, arrayUtils, Color,

      dom, domConstruct, on, number,


    ) {

      var locator, routeTask, routeParams = [], segmentGraphic, directionFeatures, grid;


      on(dom.byId("directions"), "click", getDirections);


      on(dom.byId("Car"), "click", getCarDirections);

      on(dom.byId("Truck"), "click", getTruckDirections);

      on(dom.byId("Walking"), "click", getWalkingDirections);


      // Use a proxy to access the routing service, which requires credits


        urlPrefix : "",

        //proxyUrl : "/sproxy/"

        proxyUrl: "http://WebServer/proxy/proxy.ashx



      //Create a map with an initial extent. Change the extent to match the area you would like to show.

      map = new Map("map", {

        basemap: "streets",

        center: [-117.185, 34.065],

        zoom: 13



      //Add a geocoding server as the locator. This locator will be used to find the origin and destination coordinates by input addresses.

      locator = new Locator("");

      locator.outSpatialReference = map.spatialReference;


      //Fire errorHandler if the locator return en error.

      locator.on("error", errorHandler);


      //Add a network analyst server with related parameters to execute the routing task.


      routeTask = new RouteTask("");

      routeParams = new RouteParameters();

      routeParams.stops = new FeatureSet();

      routeParams.returnRoutes = false;

      routeParams.returnDirections = true;

      routeParams.directionsLengthUnits = esriUnits.MILES;

      routeParams.outSpatialReference = new SpatialReference({ wkid:102100 });


      //Show the route when the routing task is solved successfully, otherwise fire errorHandler.

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

      routeTask.on("error", errorHandler);


      //Execute a routing task when clicking "get direction".

      function getDirections() {

        routeParams.stops.features = [];;


        //Get origin address.

        var optionsFrom = {

          address: { "SingleLine": dom.byId("fromTxf").value },

          outFields: ["Loc_name"]


        var fromAddress = locator.addressToLocations(optionsFrom);


        //Get destination address.

        var optionsTo = {

          address: { "SingleLine": dom.byId("toTxf").value },

          outFields: ["Loc_name"]


        var toAddress = locator.addressToLocations(optionsTo);


        //Use dojo/promises/all to manage multiple asynchronous tasks. Once both geocodes finish, a route is calculated.



          from: fromAddress,

          to: toAddress




      function getCarDirections(){

            alert('Car button click');


            function getTruckDirections(){

            alert('Truck button click');


            function getWalkingDirections(){

            alert('Walking button click');



      //Check if the origin and destination addresses are executed successfully

      //and solve the routing task.

      function configureRoute(results) {

        //Configure symbols to be used for destinations and route segments.

        var fromSymbol = new PictureMarkerSymbol({










        var toSymbol = new PictureMarkerSymbol({











        var fromStop = getCandidate(results.from);

        if ( fromStop === null ) {

          errorHandler("The origin address is invalid");

        } else {

          var fromGraphic = new Graphic(fromStop.location, fromSymbol, { address:fromStop.address });

          routeParams.stops.features[0] =;



        var toStop = getCandidate(;

        if ( toStop === null ) {

          errorHandler("The destination address is invalid");

        } else {

          var toGraphic = new Graphic(toStop.location, toSymbol, { address:toStop.address });

          routeParams.stops.features[1] =;



        if ( fromStop !== null && toStop !== null ) {





      //Handle all the coordinate candidates of the origin and destination addresses and

      //return the candidate with the highest score.

      function getCandidate(candidates){

        var stop = null, score = 0;

        arrayUtils.forEach(candidates, function(candidate){

          if( candidate.score > score ) {

           stop = candidate;

           score = candidate.score;



        return stop;



      //Show the result of the routing task.

      function showRoute(e) {


        var data = [];

        if ( grid ) {




        var directions = e.result.routeResults[0].directions;

        directionFeatures = directions.features;

        var routeSymbol = new SimpleLineSymbol().setColor(new Color([0,0,255,0.5])).setWidth(4);


        // Zoom to results.

        map.setExtent(directions.mergedGeometry.getExtent(), true);

        // Add route to the map.

        var routeGraphic = new Graphic(directions.mergedGeometry, routeSymbol);;


        map.setExtent(directions.extent, true);


        //Display the directions.

        var directionsInfo = e.result.routeResults[0].directions.features;

        var totalDistance = number.format(directions.totalLength);

        var totalLength = number.format(directions.totalTime);

        data =,function(feature,index){

          return {

            "detail": feature.attributes.text,

            "distance": number.format(feature.attributes.length,{places:2}),

            "index": index



        grid = new Grid({

          renderRow: renderList,


        }, "grid");


        grid.on(".dgrid-row:click", zoomToSegment);



      function renderList(obj,options){

        var template = "<div class='detail'><div style='max-width:70%;float:left;'>${detail}</div><span style='float:right;' class='distance'>${distance} mi</span></div>";     

        return domConstruct.create("div", { innerHTML: esriLang.substitute(obj, template) });


      //Display any errors that were caught when attempting to solve the route.

      function errorHandler(err) {

        alert("An error occured\n" + err);



      function zoomToSegment(e) {

        //Grid row id corresponds to the segment to highlight

        var index = grid.row(e).id;

        var segment = directionFeatures[index];

        var segmentSymbol = new SimpleLineSymbol().setColor(new Color([255,0,0,0.5])).setWidth(8);


        map.setExtent(segment.geometry.getExtent(), true);

        if ( !segmentGraphic ) {

          segmentGraphic = Graphic(segment.geometry, segmentSymbol));

        } else {







<body class="claro">

  <div id="map"></div>

  <div id="dialog">


      <label for="fromTxf"><img src="" width=24 height=24></label>

      <input type="text" id="fromTxf" value="380 New York St, Redlands, CA 92373">


    <div >

      <label for="toTxf"><img src="" width=24 height=24></label>

      <input type="text" id="toTxf" value="1320 Mona Ave, Redlands, CA 92374">


    <input id="directions" type="button" value="Get Directions">


    <input id="Car" type="button" value="Get Car Route">

    <input id="Truck" type="button" value="Get Truck Route">

    <input id="Walking" type="button" value="Get Walking Route">


    <div id="directionsDetail" style="clear:both;">

      <div id="grid"></div>







Message was edited by: Ashish Nagrale