topic Re: [HELP] Convert from Legacy code to Modern code in ArcGIS JavaScript Maps SDK Questions

[HELP] Convert from Legacy code to Modern code

PhuongNguyen_Thanh — Tue, 24 Sep 2013 09:09:46 GMT

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 ^_^

Re: [HELP] Convert from Legacy code to Modern code

KenBuja — Tue, 24 Sep 2013 12:12:00 GMT

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));

Re: [HELP] Convert from Legacy code to Modern code

PhuongNguyen_Thanh — Tue, 24 Sep 2013 13:22:14 GMT

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

Re: [HELP] Convert from Legacy code to Modern code

KenBuja — Tue, 24 Sep 2013 13:40:52 GMT

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

Re: [HELP] Convert from Legacy code to Modern code

PhuongNguyen_Thanh — Wed, 25 Sep 2013 02:54:56 GMT

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 ?

Re: [HELP] Convert from Legacy code to Modern code

KenBuja — Wed, 25 Sep 2013 12:50:12 GMT

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.

Re: [HELP] Convert from Legacy code to Modern code

PhuongNguyen_Thanh — Thu, 26 Sep 2013 01:00:04 GMT

Ok ! I get it 😄 many thanks to you 😘