topic Re: Project UTM point to DD in ArcGIS JavaScript Maps SDK Questions

Project UTM point to DD

BrianBulla — Sat, 11 Dec 2021 07:54:55 GMT

Hi,

I'm trying to emulate the screen cap below into some JS.

In the SDK for Project there is no parameter specified for the Input Spatial Reference like there in the above screen cap of the Geometry Service I am using, so I'm not quite sure how I specify that in my JS. Here is what I have so far:

view.on("click", function (event) {
              event.stopPropagation(); // overwrite default click-for-popup behavior
              
              // Get the coordinates of the click on the view
              var northing = event.mapPoint.y;
              var easting = event.mapPoint.x;

              var geomSer = new GeometryService("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
              var params = new ProjectParameters();
              params.geometries = [event];
              params.outSpatialReference = 4326;
              
              var newPoint = geomSer.project(params);

              view.popup.open({
                  // Set the popup's title to the coordinates of the location
                  title: "Latitiude: " + newPoint.y + ", Longitude: " + newPoint.x,
                  content:  "Northing: " + northing + ", Easting: " + easting,
                  location: event.mapPoint // Set the location of the popup to the clicked location
              });
          });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Any guidance is appreciated.

Re: Project UTM point to DD

RobertScheitlin__GISP — Tue, 27 Feb 2018 16:49:42 GMT

Brain,

The input geometries are expected to already have their spatial reference defined in the geometry.

Re: Project UTM point to DD

KenBuja — Sat, 11 Dec 2021 07:54:57 GMT

You have to wait until the GeometryService's project method returns a Promise to get the newPoint properties

geomSer.project(params).then(function(newPoint) {
  view.popup.open({
    // Set the popup's title to the coordinates of the location
    title: "Latitiude: " + newPoint.y + ", Longitude: " + newPoint.x,
    content:  "Northing: " + northing + ", Easting: " + easting,
    location: event.mapPoint // Set the location of the popup to the clicked location
  });
}, function(error){
 console.error(error);
});
‍‍‍‍‍‍‍‍‍‍‍

Re: Project UTM point to DD

BrianBulla — Sat, 11 Dec 2021 07:55:00 GMT

Hi Ken, Robert,

Yes, I've looked more into the Promise and how the .then is working, so it makes more sense now. Still not quite working. No error messages, just no response on the click event. Can you see where things might be going wrong??

Here is my entire code. Basically I'm just using the samples and messing with them.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Manhole WebMap - 4.6</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #info {
      background-color: black;
      opacity: 0.75;
      color: orange;
      font-size: 18pt;
      padding: 8px;
      visibility: visible;
    }

  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

  <script src="https://js.arcgis.com/4.6/"></script>

  <script>
      require([
        "esri/views/MapView",
        "esri/WebMap",
        "dojo/domReady!",
        "esri/tasks/GeometryService",
        "esri/tasks/support/ProjectParameters"
      ], function (
        MapView, WebMap, GeometryService, ProjectParameters
      ) {
          /************************************************************
           * Creates a new WebMap instance. A WebMap must reference
           * a PortalItem ID that represents a WebMap saved to
           * arcgis.com or an on-premise portal.
           *
           * To load a WebMap from an on-premise portal, set the portal
           * url with esriConfig.portalUrl.
           ************************************************************/
          var webmap = new WebMap({
              portalItem: { // autocasts as new PortalItem()
                  id: "465bae21a7f44abf85b4523817aea604"
              }
          });

          /************************************************************
           * Set the WebMap instance to the map property in a MapView.
           ************************************************************/
          var view = new MapView({
              map: webmap,
              container: "viewDiv"
          });

          view.ui.add("info", "bottom-right");

          view.on("click", function (event) {
              event.stopPropagation(); // overwrite default click-for-popup behavior
              
              // Get the coordinates of the click on the view
              var northing = event.mapPoint.y;
              var easting = event.mapPoint.x;

              var geomSer = new GeometryService("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
              var params = new ProjectParameters();
              params.geometries = [event];
              params.outSpatialReference = 4326;
                            
              geomSer.project(params).then(function(projectedPoint){
                  view.popup.open({
                       //Set the popup's title to the coordinates of the location
                      title: "Latitude: " + projectedPoint.y + ", Longitude: " + projectedPoint.x,
                      content:  "Northing: " + northing + ", Easting: " + easting,
                      location: event.mapPoint // Set the location of the popup to the clicked location
                  });
              }, function(error) {
                  console.error(error)
              });                            
          });

      });
  </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="info">
        <span id="name"></span>
    </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I'm doing all this in an HTML file. I'm relatively new to web programming. What is the best way to debug this? Can I do it in Visual Studio like I would with an ArcPro C# project??

Re: Project UTM point to DD

RobertScheitlin__GISP — Tue, 27 Feb 2018 18:17:15 GMT

Brian,

The one thing I see now in your code is this line:

params.geometries = [event];‍

it should be:

params.geometries = [event.mapPoint];‍

Debugging is best done in your browsers developer tools in my opinion (I am partial to Chrome).

Re: Project UTM point to DD

KenBuja — Sat, 11 Dec 2021 07:55:03 GMT

Your function arguments have to be in the same order as the require modules. See this blog for more details: The abc’s of AMD | ArcGIS Blog

require([
  "esri/views/MapView",
  "esri/WebMap",
  "esri/tasks/GeometryService",
  "esri/tasks/support/ProjectParameters",
  "dojo/domReady!"
], function (
  MapView, WebMap, GeometryService, ProjectParameters

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I use the debugging tools in Visual Studios when create a project like that. You should also get in the habit of using the browsers' debugging tools.

Re: Project UTM point to DD

BrianBulla — Tue, 27 Feb 2018 18:44:47 GMT

Thanks Robert. Yes, that was a problem, but not the ultimate issue.

It seems like in debug mode the code stops at this line:

var geomSer = new GeometryService("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer/project");‍

Do I have that URL right? With (or without) the /project does not seem to matter. I get a GeometryService is not a constructor error.

Re: Project UTM point to DD

RobertScheitlin__GISP — Tue, 27 Feb 2018 18:50:25 GMT

Even after applying Ken latest reply about the require order?..

Re: Project UTM point to DD

BrianBulla — Tue, 27 Feb 2018 19:00:00 GMT

Sorry, I didn't see Ken's second post there.

But....I have made his changes to the order, so now I get past the URL issue, but now another error is coming up relating to the outSpatialReference:

Re: Project UTM point to DD

RobertScheitlin__GISP — Tue, 27 Feb 2018 19:05:42 GMT

Brain,

It does not look like projectParams autocasts the outSpatialReference from a number like you are providing. So you have to add the Require for SpatialReference and give it a true SpatialReference class and not just 4326.

Re: Project UTM point to DD

BrianBulla — Sat, 11 Dec 2021 07:55:05 GMT

OK. That seems to be working. At least I am past all of the errors now. Still not getting the expected result, but at least I am closer. See below for final code and what I am seeing. Not sure why the Lat/Long is 'undefined'.

view.on("click", function (event) {
              event.stopPropagation(); // overwrite default click-for-popup behavior
              
              // Get the coordinates of the click on the view
              var northing = event.mapPoint.y;
              var easting = event.mapPoint.x;

              var geomSer = new GeometryService("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
              var params = new ProjectParameters();
              params.geometries = [event.mapPoint];

              var id = new SpatialReference();
              id.wkid = 4326;
              params.outSpatialReference = id;
                            
              geomSer.project(params).then(function(projectedPoint){
                  view.popup.open({
                       //Set the popup's title to the coordinates of the location
                      title: "Latitude: " + projectedPoint.y + ", Longitude: " + projectedPoint.x,
                      content:  "Northing: " + northing + ", Easting: " + easting,
                      location: event.mapPoint // Set the location of the popup to the clicked location
                  });
              }, function(error) {
                  console.error(error)
              });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Project UTM point to DD

BrianBulla — Tue, 27 Feb 2018 19:21:12 GMT

Yes!! I finally got it:

title: "Latitude: " + projectedPoint[0].x + ", Longitude: " + projectedPoint[0].y,

Wow....that was a lot of work.