Converting lat long to spatial reference

NhuMai · ‎12-13-2016

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

KenBuja · ‎12-15-2016

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

NhuMai · ‎12-15-2016

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

or

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