Process GeometryService.Project in Loop - Javascript

BryanLynn1 · ‎11-27-2018

I have a situation where I need to process an array of points in a loop. Within the loop I need to get the projected coordinates of the point - so I can do some additional processing. However, the call to get the projected coordinates is an asynchronous call so the loop continues BEFORE I have my projected coordinates back from the server. Can someone explain how to make this work? Below is 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">
<title>Test Callback</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
<style></style>
<script src="https://js.arcgis.com/3.26/"></script>
<script>
var map;

require([
"esri/map",
"esri/geometry/Point",
"esri/tasks/GeometryService",
"esri/SpatialReference",
"esri/tasks/ProjectParameters",
"dojo/_base/array",
"dojo/dom",
"dojo/on",
"dojo/domReady!"],

function(Map, Point, GeometryService, SpatialReference, ProjectParameters, arrayUtils, dom, on) {
var pointArray = [];
var newPointArray = [];
var myRunButton = dom.byId("runButton");
on(myRunButton, "click", runClick);

function runClick() {
alert("In runClick");
var baseX = 2572000;
var baseY = 600000;
var wkid = 2915;

// create an array of points
for (i=0; i < 3; i++) {
var thisPoint = new Point(baseX + (100 * i), baseY + (100 * i), new SpatialReference(Number(wkid)));
pointArray.push(thisPoint);
}

// loop through the points and get the web mercator values
// I can't just send the whole point array over. The actual array in my code isn't a point array
// but the point is part of the process and I need its projected value before I proceed through the loop.
// And the points MUST remain in order.
arrayUtils.forEach(pointArray, function(thisPoint) {
// call method to convert the point
var webMercPT = getWebMercPt(thisPoint);

// here I want to take the results from the method getWebMercPt and do something with them
// however this code always fires before the pojection task is finished.
alert("in run click after call to getWebMercPt");
newPointArray.push(webMercPT);
});
}

function getWebMercPt(pt) {
var geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
var params = new ProjectParameters();
params.geometries = [pt];
params.outSR = new SpatialReference(4326);

// this call needs to finish before returning to the calling method
// THIS IS THE PART I CAN'T FIGURE OUT - HOW DO YOU MAKE IT WAIT AND RETURN THE RESULTS FROM THE PROJECTION
geometryService.project(params).then(function(results) {
alert("In success");
return results;
}, errGetPoint);
}

function processCoursePoint(results) {
//alert("Success: " + results.x.toString());
alert("In success");
return results;
}

function errGetPoint(e) {
alert("In error");
}
});
</script>
</head>
<body>
<input type="button" id="runButton" value="Click Me" />
<div id="results"></div>
</body>
</html>