Problems projecting a point

heatherdaw · ‎06-17-2014

I am trying to display a point that is in UTM NAD83 Zone 11. When I try to project the point to Web Mercator, the point's coordinates seem to revert to Null and display just West of Africa instead of in Western Canada where I want it. I thought I had based my script on various online samples (including this post: http://forums.arcgis.com/threads/36983-geometry-task-project-bug), but clearly something is missing. Here's part of the script (the entire script has been attached):

//convert point's coordinates from UTM NAD83 zone11 to Universal Tranverse Meracator:
function getCoordinates() {

   var easting = 422310.0;
          var northing = 5853918.0;
    var newlong = null;
   var newlat = null;
   var newpoint = null;

    var inSR = new esri.SpatialReference({
              wkid: 26911
   });

   var outSR = new esri.SpatialReference({
              wkid: 3857
   });

   var geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
            var inputpoint = new esri.geometry.Point(easting, northing, inSR);
     var PrjParams = new esri.tasks.ProjectParameters();
            PrjParams.geometries = [ inputpoint ];
     PrjParams.outSR = outSR;
     geometryService.project(PrjParams, function(outputpoint) {
     newpoint = outputpoint[0];
            });

          var point = new esri.geometry.Point(newpoint, outSR);
          return point;

       };

Suggestions?
Heather

JonathanUihlein · ‎06-17-2014

var point = new esri.geometry.Point(newpoint, outSR);     
          return point;

This code exists outside your GeometryService projection callback so newpoint will always equal null.
This is both a scope and timing issue.

In the context of your current application, you would need to figure out a way to return the result of your projection to mapLoaded() based on the deferred response.

Note: I wouldn't do that. It's far easier to restructure your application to be more 'script-like' in its execution.

I would create a function specifically for projecting your point from your mapLoaded() function.

Example below:


<!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>View Site</title>
    
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
     
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol",        
        "esri/tasks/GeometryService", "esri/tasks/ProjectParameters",            
        "esri/SpatialReference", "esri/geometry/Extent", "esri/geometry/Point"
      ], function( 
        Map, Graphic, SimpleMarkerSymbol, 
        GeometryService, ProjectParameters, SpatialReference, Extent, Point
      ) {
           
        map = new Map("map",{
          basemap: "topo",
          extent: new Extent(-13306545,6831419,-13027688,7064868, new SpatialReference({ wkid: 3857})),
          minZoom: 2
        });

        map.on("load", mapLoaded);

        function mapLoaded(){
          map.graphics.clear();
          showPoint();            
        };

        function createSymbol(){
          var markerSymbol = new SimpleMarkerSymbol();
          markerSymbol.setColor("blue");
          markerSymbol.setOutline(null);
          return markerSymbol;
        };
        
        //convert point's coordinates from UTM NAD83 zone11 to Universal Tranverse Meracator:
        function showPoint() {     

          var easting = 422310.0;
          var northing = 5853918.0;      
          var newlong = null;
          var newlat = null;
          var newpoint = null;

          var inSR = new SpatialReference({ wkid: 26911 });
          var outSR = new SpatialReference({ wkid: 3857 });

          var geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
          
          var inputpoint = new Point(easting, northing, inSR);        
          
          var PrjParams = new ProjectParameters();
          
          PrjParams.geometries = [ inputpoint ];
          PrjParams.outSR = outSR;     
          
          geometryService.project(PrjParams, function(outputpoint) {
          
            var point = new Point(outputpoint[0], outSR);        
            var graphic = new Graphic(point, createSymbol());
            map.graphics.add(graphic);     

          });
        };
      });
    </script>
  </head>
  <body class="claro">
    <div id="map"></div>
    <div id="picker1"></div>
  </body>
</html>

View solution in original post

JonathanUihlein · ‎06-17-2014

var point = new esri.geometry.Point(newpoint, outSR);     
          return point;

This code exists outside your GeometryService projection callback so newpoint will always equal null.
This is both a scope and timing issue.

In the context of your current application, you would need to figure out a way to return the result of your projection to mapLoaded() based on the deferred response.

Note: I wouldn't do that. It's far easier to restructure your application to be more 'script-like' in its execution.

I would create a function specifically for projecting your point from your mapLoaded() function.

Example below:


<!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>View Site</title>
    
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
     
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;

      require([
        "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol",        
        "esri/tasks/GeometryService", "esri/tasks/ProjectParameters",            
        "esri/SpatialReference", "esri/geometry/Extent", "esri/geometry/Point"
      ], function( 
        Map, Graphic, SimpleMarkerSymbol, 
        GeometryService, ProjectParameters, SpatialReference, Extent, Point
      ) {
           
        map = new Map("map",{
          basemap: "topo",
          extent: new Extent(-13306545,6831419,-13027688,7064868, new SpatialReference({ wkid: 3857})),
          minZoom: 2
        });

        map.on("load", mapLoaded);

        function mapLoaded(){
          map.graphics.clear();
          showPoint();            
        };

        function createSymbol(){
          var markerSymbol = new SimpleMarkerSymbol();
          markerSymbol.setColor("blue");
          markerSymbol.setOutline(null);
          return markerSymbol;
        };
        
        //convert point's coordinates from UTM NAD83 zone11 to Universal Tranverse Meracator:
        function showPoint() {     

          var easting = 422310.0;
          var northing = 5853918.0;      
          var newlong = null;
          var newlat = null;
          var newpoint = null;

          var inSR = new SpatialReference({ wkid: 26911 });
          var outSR = new SpatialReference({ wkid: 3857 });

          var geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
          
          var inputpoint = new Point(easting, northing, inSR);        
          
          var PrjParams = new ProjectParameters();
          
          PrjParams.geometries = [ inputpoint ];
          PrjParams.outSR = outSR;     
          
          geometryService.project(PrjParams, function(outputpoint) {
          
            var point = new Point(outputpoint[0], outSR);        
            var graphic = new Graphic(point, createSymbol());
            map.graphics.add(graphic);     

          });
        };
      });
    </script>
  </head>
  <body class="claro">
    <div id="map"></div>
    <div id="picker1"></div>
  </body>
</html>

heatherdaw · ‎06-17-2014

Thank you so much Jon! That did the trick. Wish I'd posted my question much earlier.

JonathanUihlein · ‎06-18-2014

No problem! Feel free to make a new thread any time you have an issue.

While we don't have time to answer every single thread, I personally try to answer questions that are well-written and organized.

Also, attaching code is always appreciated 😄