# Adapt tutorial for alternative spatial reference

263
3
06-22-2020 02:17 PM
New Contributor II

I'm working from the tutorial here:

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

Thank you!

1 Solution

Accepted Solutions
MVP Esteemed Contributor

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍``
3 Replies
MVP Esteemed Contributor

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍``
New Contributor II

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍``
MVP Esteemed Contributor

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