Project UTM point to DD

1595
11
Jump to solution
02-27-2018 08:15 AM
BrianBulla
Occasional Contributor III

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.

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

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

View solution in original post

11 Replies
RobertScheitlin__GISP
MVP Emeritus

Brain,

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

KenBuja
MVP Esteemed Contributor

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);
});
BrianBulla
Occasional Contributor III

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

0 Kudos
KenBuja
MVP Esteemed Contributor

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.

RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
BrianBulla
Occasional Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
BrianBulla
Occasional Contributor III

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:

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos