showing the possible Routes

PhuongNguyen_Thanh · ‎10-07-2013

Hi everybody ! I'm doing a map that when I click on the map and it will show us possible routes can go in 5 or 10 minutes. But I'm getting stuck that it's not drawing something on a map.

Here's my code

<!DOCTYPE html>  <html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">         <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">      <script src="http://js.arcgis.com/3.6/"></script>             <title>Routing</title>     <style>         html, body, #map{         height: 100%;         margin: 0;         padding: 0;         }     </style>      <script>         var map, serviceAreaTask, params, routeparams, routeTask;         require([               "dojo/_base/Color",                                   "esri/map",              "esri/graphic",               "esri/symbols/SimpleMarkerSymbol",              "esri/symbols/SimpleLineSymbol",              "esri/tasks/FeatureSet",              "esri/tasks/RouteTask",              "esri/tasks/RouteParameters",              "esri/tasks/RouteResult",              "dojo/domReady!"         ],        function (Color, Map, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FeatureSet, RouteTask, RouteParameters, RouteResult) {              esriConfig.defaults.io.proxyUrl = "/proxy";                         map = Map("map", {                basemap: "streets",                center: [-86.18, 40.22],                zoom: 16            });             map.on("solvecomplete", showRoute);              routeparams = new RouteParameters();            routeparams.attributeParameterValues = [{attributeName: "Time", parameterName: "10 MPH", value: "10"}];            routeparams.outSpatialReference = map.SpatialReference;            routeparams.returnRoutes = true;            routeparams.returnStops = true;            routeTask = new RouteTask("http://tasks.arcgisonline.com/ArcGIS/rest/services/NetworkAnalysis/ESRI_Route_NA/NAServer/Route");             function showRoute(evt) {                 map.graphics.clear();                 var stopSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CROSS,                     3,                     new SimpleLineSymbol(                       SimpleLineSymbol.STYLE_SOLID,                       new Color([89, 95, 35]), 2                     ),                     new Color([130, 159, 83, 0.40])                   );                 routeparams.stops.features.push(map.graphics.add(new Graphic(evt.mapPoint,stopSymbol)));                             routeTask.solve(routeparams, function (solveRoute) {                    var lineRoute = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([254,0,0]),3);                    dojo.forEach(solveRoute.routeResults, function (routeResult) {                        routeResult.setSymbol(lineRoute);                        map.graphics.add(routeResult);                    });                });            }          });       </script> </head> <body class="claro">     <div id="map"></div> </body> </html>

Please help me to find out where i was wrong or missing something to improve my map. Your help will be my best motivation.

Thank you for your reading time. I hope you will have a lucky day with your work 🙂 🙂 🙂 !!!!

Phuong Nguyen

nicogis · ‎10-09-2013

here https://developers.arcgis.com/en/javascript/jssamples/#search/service area you can see some samples on service area

see this code: set params.outputLines = esri.tasks.NAOutputLine.TRUE_SHAPE; and visualize lines

 <!DOCTYPE html> <html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--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>Basic Service Area with Slider</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">   <style>      body,html,#main{margin:0;padding:0;height:100%;width:100%;}   </style>       <script>var dojoConfig = { parseOnLoad: true };</script>    <script src="http://js.arcgis.com/3.7/"></script>   <script>     dojo.require("esri.map");       dojo.require("esri.tasks.servicearea");       dojo.require("dijit.dijit");     dojo.require("dijit.layout.BorderContainer");     dojo.require("dijit.layout.ContentPane");     dojo.require("dijit.form.HorizontalSlider");     dojo.require("dijit.form.HorizontalRuleLabels");     dojo.require("dijit.form.HorizontalRule");      var map, serviceAreaTask, params, clickpoint;      function init() {            //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to         //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic        //for details on setting up a proxy page.       esri.config.defaults.io.proxyUrl = "/proxy";              map = new esri.Map("map", {          basemap: "streets",         center: [-122.447, 37.781],         zoom: 15       });        dojo.connect(map, "onClick", mapClickHandler);        params = new esri.tasks.ServiceAreaParameters();       params.defaultBreaks= [1];       params.outSpatialReference = map.spatialReference;       params.returnFacilities = false;       params.outputLines = esri.tasks.NAOutputLine.TRUE_SHAPE;       serviceAreaTask = new esri.tasks.ServiceAreaTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area");                    dojo.connect(dijit.byId("hslider"), "onChange", updateHorizontalLabel);       updateHorizontalLabel();     }      // Create function that updates label when changed     function updateHorizontalLabel() {       // Get access to nodes/widgets we need to get/set values       var hSlider = dijit.byId("hslider");       var label = dojo.byId("decValue");       // Update label       label.innerHTML = hSlider.get("value");       params.defaultBreaks = [hSlider.value/60];       if (typeof clickpoint != 'undefined') {         mapClickHandler(clickpoint);       };     }          function mapClickHandler(evt) {       clickpoint = evt;       map.graphics.clear(); //clear existing graphics           //define the symbology used to display the results and input point       var pointSymbol = new esri.symbol.SimpleMarkerSymbol(         esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND,          20,         new esri.symbol.SimpleLineSymbol(           esri.symbol.SimpleLineSymbol.STYLE_SOLID,           new dojo.Color([88,116,152]), 2         ),         new dojo.Color([88,116,152,0.45])       );       var inPoint = new esri.geometry.Point(evt.mapPoint.x,evt.mapPoint.y,map.spatialReference);       var location = new esri.Graphic(inPoint,pointSymbol);        map.graphics.add(location);       var features = [];       features.push(location);       var facilities = new esri.tasks.FeatureSet();       facilities.features = features;       params.facilities = facilities;        //solve        serviceAreaTask.solve(params,function(solveResult){         var result = solveResult;         var serviceAreaSymbol = new esri.symbol.SimpleFillSymbol(           esri.symbol.SimpleFillSymbol.STYLE_SOLID,             new esri.symbol.SimpleLineSymbol(             esri.symbol.SimpleLineSymbol.STYLE_SOLID,              new dojo.Color([232,104,80]), 2           ),           new dojo.Color([232,104,80,0.25])         );         var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,                new dojo.Color([232,104,80]), 2),new dojo.Color([232,104,80,0.25]));         dojo.forEach(solveResult.serviceAreaPolygons, function(serviceArea){           serviceArea.setSymbol(polygonSymbol);           map.graphics.add(serviceArea);         });         dojo.forEach(solveResult.serviceAreaPolylines, function(g)         {             var outline = new esri.symbol.SimpleLineSymbol().setWidth(2);             g.setSymbol(outline);             map.graphics.add(g);         }         );                },function(err){         console.log(err.message);       });     }           dojo.ready(init);   </script> </head>  <body class="claro">    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0px;">     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">       <b>Click to find the service area polygon</b>        <div style="width: 400px; margin: 10px">         <!-- create rules and labels above horizontal slider -->         <ol data-dojo-type="dijit.form.HorizontalRuleLabels"           data-dojo-props="             container: 'topDecoration',             style: 'height: 1.2em; font-weight: bold; margin: 0 12px;'">           <li>0</li>           <li>0:20</li>           <li>0:40</li>           <li>1:00</li>           <li>1:20</li>           <li>1:40</li>           <li>2:00</li>         </ol>         <div data-dojo-type="dijit.form.HorizontalRule"           data-dojo-props="             container: 'topDecoration',             count: 7,             style: 'height: 5px; margin: 0 12px;'">         </div>         <input id="hslider" value="60" type="range"           data-dojo-type="dijit.form.HorizontalSlider"           data-dojo-props="             minimum: 0,             maximum: 120,             showButtons: false,             discreteValues: 25">         <div style="padding-top: 10px; text-align: center;">Travel time: <strong id="decValue"></strong> seconds</div>       </div>      </div>       <div id="map" dojotype="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>       </div> </body> </html>

View solution in original post

PhuongNguyen_Thanh · ‎10-08-2013

anyone can help me ? 😞 😞 😞

nicogis · ‎10-08-2013

I have fixed a lot of errors. Now you can continue on this code ...

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"/>
    <script src="http://js.arcgis.com/3.6/" type="text/javascript"></script>
    <title>Routing</title>
    <style type="text/css">
        html, body, #map
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        var map, serviceAreaTask, params, routeparams, routeTask;
        require([
             "dojo/_base/Color",
             "esri/map",
             "esri/graphic",
             "esri/symbols/SimpleMarkerSymbol",
             "esri/symbols/SimpleLineSymbol",
             "esri/tasks/FeatureSet",
             "esri/tasks/RouteTask",
             "esri/tasks/RouteParameters",
             "esri/tasks/RouteResult",
             "dojo/domReady!"
        ],
       function (Color, Map, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, FeatureSet, RouteTask, RouteParameters, RouteResult) {


           //esriConfig.defaults.io.proxyUrl = "/proxy";



           map = Map("map", {
               basemap: "streets",
               center: [-86.18, 40.22],
               zoom: 16
           });




           routeparams = new RouteParameters();
           routeparams.attributeParameterValues = [{ attributeName: "Time", parameterName: "Speed class 13", value: "10"}];
           routeparams.outSpatialReference = map.SpatialReference;
           routeparams.returnRoutes = true;
           routeparams.returnStops = true;
           routeparams.stops = new FeatureSet();
           routeTask = new RouteTask("http://tasks.arcgisonline.com/ArcGIS/rest/services/NetworkAnalysis/ESRI_Route_NA/NAServer/Route");
           map.on("click", showRoute);

           function showRoute(evt) {
               console.log("click");

               //map.graphics.clear();
               var 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 g = new Graphic(evt.mapPoint, stopSymbol);
               map.graphics.add(g);
               routeparams.stops.features.push(g);

               if (map.graphics.graphics.length != 2) {
                   return;
               }


               routeTask.solve(routeparams, function (solveRoute) {
                   var lineRoute = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([254, 0, 0]), 3);
                   dojo.forEach(solveRoute.routeResults, function (routeResult) {
                       var g = routeResult.route;
                       g.setSymbol(lineRoute);
                       map.graphics.add(g);
                   });
               });
           }


       });


    </script>
</head>
<body class="claro">
    <div id="map">
    </div>
</body>
</html>

PhuongNguyen_Thanh · ‎10-08-2013

I have fixed a lot of errors. Now you can continue on this code ...

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"/>
    <script src="http://js.arcgis.com/3.6/" type="text/javascript"></script>
    <title>Routing</title>
    <style type="text/css">
        html, body, #map
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">
        var map, serviceAreaTask, params, routeparams, routeTask;
        require([
             "dojo/_base/Color",
             "esri/map",
             "esri/graphic",
             "esri/symbols/SimpleMarkerSymbol",
             "esri/symbols/SimpleLineSymbol",
             "esri/tasks/FeatureSet",
             "esri/tasks/RouteTask",
             "esri/tasks/RouteParameters",
             "esri/tasks/RouteResult",
             "dojo/domReady!"
        ],
       function (Color, Map, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, FeatureSet, RouteTask, RouteParameters, RouteResult) {


           //esriConfig.defaults.io.proxyUrl = "/proxy";



           map = Map("map", {
               basemap: "streets",
               center: [-86.18, 40.22],
               zoom: 16
           });




           routeparams = new RouteParameters();
           routeparams.attributeParameterValues = [{ attributeName: "Time", parameterName: "Speed class 13", value: "10"}];
           routeparams.outSpatialReference = map.SpatialReference;
           routeparams.returnRoutes = true;
           routeparams.returnStops = true;
           routeparams.stops = new FeatureSet();
           routeTask = new RouteTask("http://tasks.arcgisonline.com/ArcGIS/rest/services/NetworkAnalysis/ESRI_Route_NA/NAServer/Route");
           map.on("click", showRoute);

           function showRoute(evt) {
               console.log("click");

               //map.graphics.clear();
               var 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 g = new Graphic(evt.mapPoint, stopSymbol);
               map.graphics.add(g);
               routeparams.stops.features.push(g);

               if (map.graphics.graphics.length != 2) {
                   return;
               }


               routeTask.solve(routeparams, function (solveRoute) {
                   var lineRoute = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([254, 0, 0]), 3);
                   dojo.forEach(solveRoute.routeResults, function (routeResult) {
                       var g = routeResult.route;
                       g.setSymbol(lineRoute);
                       map.graphics.add(g);
                   });
               });
           }


       });


    </script>
</head>
<body class="claro">
    <div id="map">
    </div>
</body>
</html>

Dear Ciava,

You are my savior 🙂 🙂 many many thanks to you :D.

And by the way, can you guide me how to automatically show all the routes or points that we can go in 10 minutes by car when we open a web map (I use "onload" function and serviceAreaTask)

Thank you,

Phuong Nguyen

nicogis · ‎10-09-2013

here https://developers.arcgis.com/en/javascript/jssamples/#search/service area you can see some samples on service area

see this code: set params.outputLines = esri.tasks.NAOutputLine.TRUE_SHAPE; and visualize lines

 <!DOCTYPE html> <html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--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>Basic Service Area with Slider</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">   <style>      body,html,#main{margin:0;padding:0;height:100%;width:100%;}   </style>       <script>var dojoConfig = { parseOnLoad: true };</script>    <script src="http://js.arcgis.com/3.7/"></script>   <script>     dojo.require("esri.map");       dojo.require("esri.tasks.servicearea");       dojo.require("dijit.dijit");     dojo.require("dijit.layout.BorderContainer");     dojo.require("dijit.layout.ContentPane");     dojo.require("dijit.form.HorizontalSlider");     dojo.require("dijit.form.HorizontalRuleLabels");     dojo.require("dijit.form.HorizontalRule");      var map, serviceAreaTask, params, clickpoint;      function init() {            //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to         //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic        //for details on setting up a proxy page.       esri.config.defaults.io.proxyUrl = "/proxy";              map = new esri.Map("map", {          basemap: "streets",         center: [-122.447, 37.781],         zoom: 15       });        dojo.connect(map, "onClick", mapClickHandler);        params = new esri.tasks.ServiceAreaParameters();       params.defaultBreaks= [1];       params.outSpatialReference = map.spatialReference;       params.returnFacilities = false;       params.outputLines = esri.tasks.NAOutputLine.TRUE_SHAPE;       serviceAreaTask = new esri.tasks.ServiceAreaTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area");                    dojo.connect(dijit.byId("hslider"), "onChange", updateHorizontalLabel);       updateHorizontalLabel();     }      // Create function that updates label when changed     function updateHorizontalLabel() {       // Get access to nodes/widgets we need to get/set values       var hSlider = dijit.byId("hslider");       var label = dojo.byId("decValue");       // Update label       label.innerHTML = hSlider.get("value");       params.defaultBreaks = [hSlider.value/60];       if (typeof clickpoint != 'undefined') {         mapClickHandler(clickpoint);       };     }          function mapClickHandler(evt) {       clickpoint = evt;       map.graphics.clear(); //clear existing graphics           //define the symbology used to display the results and input point       var pointSymbol = new esri.symbol.SimpleMarkerSymbol(         esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND,          20,         new esri.symbol.SimpleLineSymbol(           esri.symbol.SimpleLineSymbol.STYLE_SOLID,           new dojo.Color([88,116,152]), 2         ),         new dojo.Color([88,116,152,0.45])       );       var inPoint = new esri.geometry.Point(evt.mapPoint.x,evt.mapPoint.y,map.spatialReference);       var location = new esri.Graphic(inPoint,pointSymbol);        map.graphics.add(location);       var features = [];       features.push(location);       var facilities = new esri.tasks.FeatureSet();       facilities.features = features;       params.facilities = facilities;        //solve        serviceAreaTask.solve(params,function(solveResult){         var result = solveResult;         var serviceAreaSymbol = new esri.symbol.SimpleFillSymbol(           esri.symbol.SimpleFillSymbol.STYLE_SOLID,             new esri.symbol.SimpleLineSymbol(             esri.symbol.SimpleLineSymbol.STYLE_SOLID,              new dojo.Color([232,104,80]), 2           ),           new dojo.Color([232,104,80,0.25])         );         var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,                new dojo.Color([232,104,80]), 2),new dojo.Color([232,104,80,0.25]));         dojo.forEach(solveResult.serviceAreaPolygons, function(serviceArea){           serviceArea.setSymbol(polygonSymbol);           map.graphics.add(serviceArea);         });         dojo.forEach(solveResult.serviceAreaPolylines, function(g)         {             var outline = new esri.symbol.SimpleLineSymbol().setWidth(2);             g.setSymbol(outline);             map.graphics.add(g);         }         );                },function(err){         console.log(err.message);       });     }           dojo.ready(init);   </script> </head>  <body class="claro">    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0px;">     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">       <b>Click to find the service area polygon</b>        <div style="width: 400px; margin: 10px">         <!-- create rules and labels above horizontal slider -->         <ol data-dojo-type="dijit.form.HorizontalRuleLabels"           data-dojo-props="             container: 'topDecoration',             style: 'height: 1.2em; font-weight: bold; margin: 0 12px;'">           <li>0</li>           <li>0:20</li>           <li>0:40</li>           <li>1:00</li>           <li>1:20</li>           <li>1:40</li>           <li>2:00</li>         </ol>         <div data-dojo-type="dijit.form.HorizontalRule"           data-dojo-props="             container: 'topDecoration',             count: 7,             style: 'height: 5px; margin: 0 12px;'">         </div>         <input id="hslider" value="60" type="range"           data-dojo-type="dijit.form.HorizontalSlider"           data-dojo-props="             minimum: 0,             maximum: 120,             showButtons: false,             discreteValues: 25">         <div style="padding-top: 10px; text-align: center;">Travel time: <strong id="decValue"></strong> seconds</div>       </div>      </div>       <div id="map" dojotype="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>       </div> </body> </html>

PhuongNguyen_Thanh · ‎10-09-2013

🙂 🙂 many thanks to you

Best Regards,

Phuong Nguyen