[HELP] Convert from Legacy code to Modern code

PhuongNguyen_Thanh · ‎09-24-2013

Hi everybody ! I'm practicing this example https://developers.arcgis.com/en/javascript/jssamples/routetask_basic_servicearea.html
and success. Now I'm converting those codes in this example into Modern code but I can't figure out where I'm wrong 😞 . So please help me to find that error

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 type="text/javascript">djConfig = { parseOnLoad:true };</script>      <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, clickpoint;         require(["esri/map", "esri/graphic", "esri/tasks/FeatureSet", "esri/tasks/ServiceAreaSolveResult", "esri/tasks/ServiceAreaParameters", "esri/tasks/ServiceAreaTask", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/geometry/Point", "dojo/_base/Color"],              function (Map, Graphic, FeatureSet, ServiceAreaParameters, ServiceAreaTask, SimpleMarkersSymbol, SimpleLineSymbol, Point, SimpleFillSymbol, Color, ServiceAreaSolveResult) {              esriConfig.defaults.io.proxyUrl = "/proxy";             esriConfig.defaults.io.alwaysUseProxy = false;              map = new Map("map", {                 basemap: "streets",                 center: [-86.18, 32.22],                 zoom: 12             });              params = new ServiceAreaParameters();             params.defaultBreaks = [12];             params.outSpatialReference = map.SpatialReference;             params.returnFacilities = false;              serviceAreaTask = new ServiceAreaTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area");              map.on("click", mapClicked);              function mapClicked(evt) {                 clickpoint = evt;                 map.graphics.clear();                 var markerSymbol = new SimpleMarkerSymbol(       SimpleMarkerSymbol.STYLE_CROSS, 22,       new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 128, 0]), 4));                  var point = new Point(evt.mapPoint.x, evt.mapPoint.y, map.spatialReference);                  var location = new Graphic(point, markerSymbol);                  map.graphics.add(location);                 var features = [];                 features.push(location);                 var facilities = new FeatureSet();                 facilities.features = features;                 params.facilities = facilities;                  serviceAreaTask.solve(params, function (solveResult) {                     var result = solveResult;                     var serviceAreaSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));                     var polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 250, 0, 0.25]));                     dojo.forEach(solveResult.serviceAreaPolygons, function(serviceArea) {                         serviceAre.setSymbol(polygonSymbol);                         map.graphics.add(serviceArea);                     });                 });                    }         });                 </script> </head> <body class="claro">     <div id="map"></div> </body> </html>

Many thanks ^_^

KenBuja · ‎09-24-2013

The first thing you have to remember when adding in modules in "require" is that the arguments in the function have to be in the same order.

You had

function (Map, Graphic, FeatureSet, ServiceAreaParameters, ServiceAreaTask, SimpleMarkersSymbol, SimpleLineSymbol, Point, SimpleFillSymbol, Color, ServiceAreaSolveResult)

but it should be

function (Map, Graphic, FeatureSet, ServiceAreaSolveResult, ServiceAreaParameters, ServiceAreaTask, SimpleMarkersSymbol, SimpleFillSymbol, SimpleLineSymbol, Point, Color)

Next, you should add in another module to signal that the DOM is ready. Take a look at this article to get a better understanding of which one you should use. In your code, I just added in "dojo/domReady!" at the end and the page came up correctly.

        require(["esri/map",                  "esri/graphic",                  "esri/tasks/FeatureSet",                  "esri/tasks/ServiceAreaSolveResult",                  "esri/tasks/ServiceAreaParameters",                  "esri/tasks/ServiceAreaTask",                  "esri/symbols/SimpleMarkerSymbol",                  "esri/symbols/SimpleFillSymbol",                  "esri/symbols/SimpleLineSymbol",                  "esri/geometry/Point",                  "dojo/_base/Color",                  "dojo/domReady!"         ],              function (Map, Graphic, FeatureSet, ServiceAreaSolveResult, ServiceAreaParameters, ServiceAreaTask, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, Point, Color) {

Also, the argument "SimpleMarkersSymbol" in your function did not match how you called it later

                    var markerSymbol = new SimpleMarkerSymbol(           SimpleMarkerSymbol.STYLE_CROSS, 22,           new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 128, 0]), 4));

View solution in original post

KenBuja · ‎09-24-2013

The first thing you have to remember when adding in modules in "require" is that the arguments in the function have to be in the same order.

You had

function (Map, Graphic, FeatureSet, ServiceAreaParameters, ServiceAreaTask, SimpleMarkersSymbol, SimpleLineSymbol, Point, SimpleFillSymbol, Color, ServiceAreaSolveResult)

but it should be

function (Map, Graphic, FeatureSet, ServiceAreaSolveResult, ServiceAreaParameters, ServiceAreaTask, SimpleMarkersSymbol, SimpleFillSymbol, SimpleLineSymbol, Point, Color)

Next, you should add in another module to signal that the DOM is ready. Take a look at this article to get a better understanding of which one you should use. In your code, I just added in "dojo/domReady!" at the end and the page came up correctly.

        require(["esri/map",                  "esri/graphic",                  "esri/tasks/FeatureSet",                  "esri/tasks/ServiceAreaSolveResult",                  "esri/tasks/ServiceAreaParameters",                  "esri/tasks/ServiceAreaTask",                  "esri/symbols/SimpleMarkerSymbol",                  "esri/symbols/SimpleFillSymbol",                  "esri/symbols/SimpleLineSymbol",                  "esri/geometry/Point",                  "dojo/_base/Color",                  "dojo/domReady!"         ],              function (Map, Graphic, FeatureSet, ServiceAreaSolveResult, ServiceAreaParameters, ServiceAreaTask, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, Point, Color) {

Also, the argument "SimpleMarkersSymbol" in your function did not match how you called it later

                    var markerSymbol = new SimpleMarkerSymbol(           SimpleMarkerSymbol.STYLE_CROSS, 22,           new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 128, 0]), 4));

PhuongNguyen_Thanh · ‎09-24-2013

Many thanks Kenbuja !!!!! You have saved me 😄

KenBuja · ‎09-24-2013

Glad to help. Don't forget to click the check mark to signify the question was answered.

PhuongNguyen_Thanh · ‎09-24-2013

Done !!! By the way, can i ask you this question ? In esri library, does it have a method that can auto locate our location when I open a map ?

KenBuja · ‎09-25-2013

Not that I'm aware. There is this sample that uses the Geolocation API to get the current location.

Thanks for the upvote, but you should click on the check mark. This will help other users find which questions have been answered. Take a look at this page for more information.

PhuongNguyen_Thanh · ‎09-25-2013

Ok ! I get it 😄 many thanks to you 😘