Adapt tutorial for alternative spatial reference

JasonWood · ‎06-22-2020

I'm working from the tutorial here:

Display point, line, and polygon graphics | ArcGIS for Developers

And wondering how to adapt this if my coordinates are in a different spatial reference. I have the wkid.

Thank you!

RobertScheitlin__GISP · ‎06-23-2020

Jason,

You just have to project your data's spatial(SR) reference to the views SR.

Here is the updated sample code:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>
  
  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/Point",
      "esri/tasks/GeometryService",
      "esri/tasks/support/ProjectParameters",
      "esri/geometry/SpatialReference"
    ], function(Map, MapView, Graphic, GraphicsLayer, Point, GeometryService, ProjectParameters, SpatialReference)  {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-85.8337, 33.6531],
        zoom: 13
      });

      var graphicsLayer = new GraphicsLayer();
      map.add(graphicsLayer);

      var point = Point({
         type: "point",
         x: 656036.27,
         y: 1147053.29,
         spatialReference: new SpatialReference({wkid:102629})
       });

       var simpleMarkerSymbol = {
         type: "simple-marker",
         color: [226, 119, 40],  // orange
         outline: {
           color: [255, 255, 255], // white
           width: 1
         }
       };

      // Create attributes
      var attributes = {
        Name: "SO",  // The name of the
        Location: "The Calhoun County Sheriff's Office",
      };
      // Create popup template
      var popupTemplate = {
        title: "{Name}",
        content: "I am located at <b>{Location}</b>."
      };

      var geomSer = new GeometryService({url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer'});
      var params = new ProjectParameters({
        geometries: [point],
        outSpatialReference: new SpatialReference({wkid:102100})
      });

      geomSer.project(params).then(function(geom){
        var pointGraphic = new Graphic({
         geometry: point,
         symbol: simpleMarkerSymbol,
         attributes: attributes,
         popupTemplate: popupTemplate
       });

       graphicsLayer.add(pointGraphic);
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎06-23-2020

Jason,

You just have to project your data's spatial(SR) reference to the views SR.

Here is the updated sample code:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>
  
  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/Point",
      "esri/tasks/GeometryService",
      "esri/tasks/support/ProjectParameters",
      "esri/geometry/SpatialReference"
    ], function(Map, MapView, Graphic, GraphicsLayer, Point, GeometryService, ProjectParameters, SpatialReference)  {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-85.8337, 33.6531],
        zoom: 13
      });

      var graphicsLayer = new GraphicsLayer();
      map.add(graphicsLayer);

      var point = Point({
         type: "point",
         x: 656036.27,
         y: 1147053.29,
         spatialReference: new SpatialReference({wkid:102629})
       });

       var simpleMarkerSymbol = {
         type: "simple-marker",
         color: [226, 119, 40],  // orange
         outline: {
           color: [255, 255, 255], // white
           width: 1
         }
       };

      // Create attributes
      var attributes = {
        Name: "SO",  // The name of the
        Location: "The Calhoun County Sheriff's Office",
      };
      // Create popup template
      var popupTemplate = {
        title: "{Name}",
        content: "I am located at <b>{Location}</b>."
      };

      var geomSer = new GeometryService({url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer'});
      var params = new ProjectParameters({
        geometries: [point],
        outSpatialReference: new SpatialReference({wkid:102100})
      });

      geomSer.project(params).then(function(geom){
        var pointGraphic = new Graphic({
         geometry: point,
         symbol: simpleMarkerSymbol,
         attributes: attributes,
         popupTemplate: popupTemplate
       });

       graphicsLayer.add(pointGraphic);
      });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JasonWood · ‎06-23-2020

This is a big help, thank you!

I'm now trying to specify my point as the map center.

This is what I tried but I ended up in the ocean.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>
  
  <script>  
    //Style point
    var simpleMarkerSymbol = {
        type: "simple-marker",
        color: [226, 119, 40],  // orange
        outline: {
            color: [255, 255, 255], // white
            width: 1
        }
    };
    // Create attributes
    var attributes = {
        Name: "Area 51",  // The name of the
        Inspector: "Bob",
    };
    // Create popup template
    var popupTemplate = {
        title: "{Name}",
        content: "Inspector Name <b>{Inspector}</b>."
    };
    
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/Point",
      "esri/tasks/GeometryService",
      "esri/tasks/support/ProjectParameters",
      "esri/geometry/SpatialReference"
    ], function(Map, MapView, Graphic, GraphicsLayer, Point, GeometryService, ProjectParameters, SpatialReference)  {

    var sr = new SpatialReference({
        wkid: 2953
    });
      
    var map = new Map({
        basemap: "topo-vector"
    });

    var graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);

      
    var point = Point({
        type: "point",
        x: 2665374.26,
        y: 7435378.29,
        spatialReference: sr
    });

    var geomSer = new GeometryService({url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer'});
    var params = new ProjectParameters({
        geometries: [point],
        outSpatialReference: new SpatialReference({wkid:102100})
    });

    geomSer.project(params).then(function(geom){
        var pointGraphic = new Graphic({
            geometry: point,
            symbol: simpleMarkerSymbol,
            attributes: attributes,
            popupTemplate: popupTemplate
        });

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: point,
            zoom: 13
        });

        graphicsLayer.add(pointGraphic);
        });
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎06-23-2020

Jason,

For that you need to use the results of the projection.

    geomSer.project(params).then(function(results){
        var pointGraphic = new Graphic({
            geometry: results[0],
            symbol: simpleMarkerSymbol,
            attributes: attributes,
            popupTemplate: popupTemplate
        });

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: results[0],
            zoom: 13
        });

        graphicsLayer.add(pointGraphic);
        });
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍