topic Re: Converting lat long to spatial reference in ArcGIS JavaScript Maps SDK Questions

Converting lat long to spatial reference

NhuMai — Sun, 12 Dec 2021 16:14:31 GMT

I'm trying to project some lat long coordinates into another spatial reference. No errors are thrown, but I printing the result to the console gives "undefined". Anyone see where I'm going wrong?

var lat = window.myMap.extent.getCenter().getLatitude().toFixed(2);
var long = window.myMap.extent.getCenter().getLongitude().toFixed(2);

var latLong = "Latitude : " + lat + " - Longitude : " + long;

var X;
var Y;

var rgpfSixSudSR = new SpatialReference ({
 wkid : 3297
 });
 var geometryService = new GeometryService("http://ourserver/arcgis/rest/services/Utilities/Geometry/GeometryServer");
 var inputPoint = new Point(lat, long, rgpfSixSudSR);
 var prjParams = new ProjectParameters ();
 prjParams.geometries = [inputPoint];
 prjParams.outSR = rgpfSixSudSR;

geometryService.project(prjParams, function (outputpoint) {
 console.log('Conversion completed');
 X = outputpoint[0].x;
 Y = outputpoint[0].y;
});

var center = "X : " + X + " - Y : " + Y;

console.log(latLong);
console.log(center);

Re: Converting lat long to spatial reference

DanPatterson_Retired — Wed, 14 Dec 2016 02:09:26 GMT

Just to clarify.... longitude latitude comes in different datums, so the numbers themselves need a spatial reference defined (such as GCS WGS84 or GCS NAD83) to begin with. You need a defined spatial reference before data can be projected to another spatial reference, whether the units are the same or different.

Re: Converting lat long to spatial reference

KenBuja — Sat, 11 Dec 2021 12:09:21 GMT

One issue is that some of the values are not going to be ready when you're trying to access them. The extent isn't available until the map is loaded and you're trying to access x and y to create center before they have been returned by the Geometry Service.

I tried updating the code to fix this, but I can't figure out why the the outputPoint is NaN.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Measure Polygon Area and Perimeter</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
        html, body, #mapDiv {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
        require(["esri/map",
              "esri/geometry/Extent",
              "esri/geometry/Point",
              "esri/SpatialReference",
              "esri/tasks/GeometryService",
              "esri/tasks/ProjectParameters"],
        function (Map, Extent, Point, SpatialReference, GeometryService, ProjectParameters) {

            var inputPoint, latLong;

            var map = new Map("mapDiv", {
                basemap: "topo",
                center: [-149.40684, -17.679],
                zoom: 10
            });

            var geometryService = new GeometryService("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
            var rgpfSixSudSR = new SpatialReference({
                wkid: 3297
            });

            map.on("load", function () {
                var lat = map.extent.getCenter().getLatitude().toFixed(2);
                var long = map.extent.getCenter().getLongitude().toFixed(2);
                latLong = "Latitude : " + lat + " - Longitude : " + long;

                inputPoint = new Point(lat, long);
                var prjParams = new ProjectParameters();
                prjParams.geometries = [inputPoint];
                prjParams.outSR = rgpfSixSudSR;
                //prjParams.transformation.wkid = 15832;
                geometryService.project(prjParams, function(outputPoints) {
                    console.log('Conversion completed');
                    var X = outputPoints[0].x;
                    var Y = outputPoints[0].y;
                    var center = "X : " + X + " - Y : " + Y;
                    console.log(latLong);
                    console.log(center);

                });
            });
        });
    </script>

</head>
<body>
    <div id="mapDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If I uncomment out line 51 (adding the transformation information as Dan_Patterson‌ suggested), the service never returns a result.

Re: Converting lat long to spatial reference

NhuMai — Wed, 14 Dec 2016 18:33:40 GMT

Okay, I see what you mean. Defining the point with WGS GCS 1984 in the following way still leaves me with undefined however...

var lat = window.myMap.extent.getCenter().getLatitude().toFixed(2);
var long = window.myMap.extent.getCenter().getLongitude().toFixed(2);

var latLong = "Latitude : " + lat + " - Longitude : " + long;

var X;
var Y;

var rgpfSixSudSR = new SpatialReference ({
wkid : 3297
});

var wgsGCSEightFourSR = new SpatialReference ({
wkid : 4326
});

var geometryService = new GeometryService("http://192.168.1.209:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var inputPoint = new Point(lat, long, wgsGCSEightFourSR);
var prjParams = new ProjectParameters ();
prjParams.geometries = [inputPoint];
prjParams.outSR = rgpfSixSudSR;

geometryService.project(prjParams, function (outputpoint) {
console.log('Conversion completed');
X = outputpoint[0].x;
Y = outputpoint[0].y;

});

var center = "X : " + X + " - Y : " + Y;

console.log(latLong);
console.log(center);

Dan Patterson a écrit:
Just to clarify.... longitude latitude comes in different datums, so the numbers themselves need a spatial reference defined (such as GCS WGS84 or GCS NAD83) to begin with. You need a defined spatial reference before data can be projected to another spatial reference, whether the units are the same or different.

Re: Converting lat long to spatial reference

NhuMai — Wed, 14 Dec 2016 18:37:08 GMT

In this case, the script in question doesn't run until map is loaded (there's a handler with map creation). The lat long prints out fine, so I'm pretty sure the inputPoint is defined. How does the line for transformation work? I'd tried defining the geographic datum directly on the input point (see my response to Dan Patterson), but still getting undefined.

Re: Converting lat long to spatial reference

NhuMai — Wed, 14 Dec 2016 18:48:18 GMT

I tried your line 51 and defined transformForward just before it, but it's still returning 'undefined':

prjParams.transformForward = true;

prjParams.transformation = 15832;

Re: Converting lat long to spatial reference

KenBuja — Wed, 14 Dec 2016 19:45:45 GMT

Thanks for pointing out the the transformForward property...I overlooked that. If you look at the transformation property, you'll see it has an additional property, wkid. However, I'm still not getting a response from the Geometry Service in my code when using the transformation.

Re: Converting lat long to spatial reference

NhuMai — Wed, 14 Dec 2016 21:09:09 GMT

"Not getting a response from the Geometry Service" means that "Conversion completed" isn't printing out for you either?

In my case, I get "Conversion completed", but X and Y print out "undefined."

Re: Converting lat long to spatial reference

KenBuja — Sat, 11 Dec 2021 12:09:24 GMT

Is this using the same code you have in your response to Dan? If so, you need to put the console.log statements inside the project callback function.

geometryService.project(prjParams, function (outputpoint) {
  console.log('Conversion completed');
  X = outputpoint[0].x;
  Y = outputpoint[0].y;
  var center = "X : " + X + " - Y : " + Y;
  console.log(latLong);
  console.log(center);
});

 

‍‍‍‍‍‍‍‍‍‍‍

Re: Converting lat long to spatial reference

NhuMai — Thu, 15 Dec 2016 18:12:56 GMT

Okay, makes sense. So I did that, but I still get the same print statements (just a bit later than when they are outside the function) :

Conversion completed
Latitude : *correct latitude* - Longitude : *correct longitude*
X : undefined - Y : undefined

Printing outputpoint gives me this:

Array[1]
0:Object
spatialReference:Object

wkid:3297
type:"point"
x:"NaN"
y:"NaN"
__proto__:Object
length:1
__proto__:Array[0]

Getting why X and Y are undefined, but still not seeing why the projection didn't work.

**UPDATE**

I saw this info from another thread :

I had a similar problem, and found a soltuion that might help. I needed to project a mapPoint from 102100 to other systems using the GeometryService.Project, however this would consistently return a mapPoint with NaN coordinates. The solution was to first check that the map point is in 102100, if so pass this to the WebMercatorUtil.webMercatorToGeographic to get a latlong mappoint. Then use the geometry service to project this latlong mapPoint into whatever other coordsystem I needed. BTW, I'm working with the API for Flex.
-Greg Nichols, TAIC

I was previously under the impression that my coordinates were GCS, but I may be wrong.

How to check what is the CS here? --> var lat = window.myMap.extent.getCenter().getLatitude().toFixed(2);

With that being said, I tried the following code :

var lat = window.myMap.extent.getCenter().getLatitude().toFixed(2);
var long = window.myMap.extent.getCenter().getLongitude().toFixed(2);

var latLong = "Latitude : " + lat + " - Longitude : " + long;

var X;
var Y;

var rgpfSixSudSR = new SpatialReference ({
wkid : 3297
});

var webMercatorSR = new SpatialReference ({
wkid : 102100
});

var geometryService = new GeometryService("http://ourserver/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var mercatorPoint = new Point(lat, long, webMercatorSR);
var inputPoint = webMercatorUtils.webMercatorToGeographic(mercatorPoint);
console.log(inputPoint);

var prjParams = new ProjectParameters ();
prjParams.geometries = [inputPoint];
prjParams.outSR = rgpfSixSudSR;

geometryService.project(prjParams, function (outputpoint) {
console.log('Conversion completed');
X = outputpoint[0].x;
Y = outputpoint[0].y;
console.log(latLong);
console.log(center);

});

It prints out this :

Object

spatialReference: Object

type: "point"

x: -0.00015154578843096328

y: -0.0013529526492823366

__proto__: Object
Conversion completed
Latitude : -16.87 - Longitude : -150.61
X : undefined - Y : undefined

Note that I left the real "lat long" values, because I'm having doubts as to what is the correct wkid. Not sure now if it's 102100 or 4326...How can I check that?

Re: Converting lat long to spatial reference

KenBuja — Sat, 11 Dec 2021 12:09:27 GMT

I went back and modified this sample to work with your coordinates and projection.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Project a point</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      .esriPopup .contentPane span {
        display: inline-block;
        padding: 0 0 0.2em 0;
        width: 6em;
      }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      var map, gsvc, pt;

      require([
        "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
        "esri/tasks/GeometryService", "esri/tasks/ProjectParameters",
        "esri/SpatialReference", "esri/InfoTemplate", "dojo/dom", "dojo/on",
        "dojo/domReady!"
      ], function(
        Map, Graphic, SimpleMarkerSymbol,
        GeometryService, ProjectParameters,
        SpatialReference, InfoTemplate, dom, on
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-150.61, -16.87],
          zoom: 10
        });

        gsvc = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        map.on("click", projectToWebMercator);

        function projectToWebMercator(evt) {
          map.graphics.clear();
          
          var point = evt.mapPoint;
          var symbol = new SimpleMarkerSymbol().setStyle("diamond");
          var graphic = new Graphic(point, symbol);
          var outSR = new SpatialReference(3297);
          
          map.graphics.add(graphic);

          gsvc.project([ point ], outSR, function(projectedPoints) {
            pt = projectedPoints[0];
            graphic.setInfoTemplate(new InfoTemplate("Coordinates",
              "<span>X:</span>" + pt.x.toFixed() + "<br>" + 
              "<span>Y:</span>" + pt.y.toFixed() + "<br>" + 
              "<input type='button' value='Convert back to LatLong' id='convert'>" +
              "<div id='latlong'></div>"));
            map.infoWindow.setTitle(graphic.getTitle());
            map.infoWindow.setContent(graphic.getContent());
            map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
            on.once(dom.byId("convert"), "click", projectToLatLong);
          });
        }

        function projectToLatLong() {
          var outSR = new SpatialReference(4326);
          var params = new ProjectParameters();
          params.geometries = [pt.normalize()];
          params.outSR = outSR;
          
          gsvc.project(params, function(projectedPoints) {
            pt = projectedPoints[0];
            dom.byId("latlong").innerHTML = "<span>Latitude: </span> " + 
              pt.y.toFixed(3) + "<br><span>Longitude:</span>" + pt.x.toFixed(3);
          });
        }
      });
    </script>

  </head>
  <body class="claro">
    <b>Click a location on the map to Project from LatLng -> RGPF_UTM_Zone_6S:</b>
    <div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Converting lat long to spatial reference

NhuMai — Thu, 15 Dec 2016 21:22:23 GMT

So that defiitely looks applicable, thanks.. However, the only difference I see between this example and my code is that the "point" to be projected comes from the map click event.

In my case, the point is defined like this :

var mercatorPoint = new Point(lat, long, webMercatorSR);

var mercatorPoint = new Point(center, webMercatorSR);

where the lat and long were defined like this :

var lat = window.myMap.extent.getCenter().getLatitude().toFixed(2);.

or the center of extent defined like this :

var center = window.myMap.extent.getCenter()

I think that my issue stems from this original point to be projected. I don't have the possibility of retrieving the map point with a click event, because the goal is to set a customTextElement of a printed page with this information based on the image extent's center.

Printing window.myMap.extent.getCenter() gives me this:

Object
spatialReference:Object
latestWkid:3857
wkid:102100
__proto__:Object
type:"point"
x:-16765493.951994848
y:-1905537.634720398
__proto__:Object