nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

[HELP] Convert from Legacy code to Modern code

PhuongNguyen_Thanh

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

Find more posts tagged with

Accepted answers

kenbuja

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

All comments

PhuongNguyen_Thanh

Ok ! I get it 😄 many thanks to you 😘

kenbuja

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

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

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

PhuongNguyen_Thanh

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

kenbuja

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)

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.