Plot path with spatial reference conversion

Question

JS & ArcGIS newb here. I have a working example (thanks to this forum) that translates from an alternate spatial reference and plots a point on a map. As you can see from the commented out lines below - I am trying to adapt this to plot a path, but I'm not having luck. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Basic Maptitle> <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 } }; //style line var simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // orange width: 2 }; 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: 2637779.94, y: 7418399.63, spatialReference: sr }); var parcelOutline = { type: "polyline", paths: [[2637816.5,7418383.95],[2637788.4,7418370.9],[2637760.75,7418357.95],[2637743.65,7418416.45],[2637799.35,7418440.55],[2637816.5,7418383.95]], spatialReference: sr }; var geomSer = new GeometryService({url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer'}); var params = new ProjectParameters({ //geometries: [point], geometries: [parcelOutline], outSpatialReference: new SpatialReference({wkid:102100}) }); geomSer.project(params).then(function(results){ //var pointGraphic = new Graphic({ // geometry: results[0], // symbol: simpleMarkerSymbol //}); var parcelOutlineGraphic = new Graphic({ geometry: results[0], symbol: simpleLineSymbol }); var view = new MapView({ container: "viewDiv", map: map, center: results[0], zoom: 13 }); //graphicsLayer.add(pointGraphic); graphicsLayer.add(parcelOutlineGraphic); }); }); script> head> <body> <div id="viewDiv">div> body> html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

rscheitlin · Answer

Jason, Couple of issues. * You are trying to give the geometry service an simple object and not an actual geometry class object. * You are trying to set the views center to a line when it only takes points. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Basic Map</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 line var simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // orange width: 2 }; require([ "esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/geometry/Polyline", "esri/tasks/GeometryService", "esri/tasks/support/ProjectParameters", "esri/geometry/SpatialReference" ], function(Map, MapView, Graphic, GraphicsLayer, Polyline, GeometryService, ProjectParameters, SpatialReference) { var sr = new SpatialReference({ wkid: 2953 }); var map = new Map({ basemap: "topo-vector" }); var graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); var parcelOutline = Polyline({ type: "polyline", paths: [[2637816.5,7418383.95],[2637788.4,7418370.9],[2637760.75,7418357.95],[2637743.65,7418416.45],[2637799.35,7418440.55],[2637816.5,7418383.95]], spatialReference: sr }); var geomSer = new GeometryService({url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer'}); var params = new ProjectParameters({ geometries: [parcelOutline], outSpatialReference: new SpatialReference({wkid:102100}) }); geomSer.project(params).then(function(results){ var parcelOutlineGraphic = new Graphic({ geometry: results[0], symbol: simpleLineSymbol }); var view = new MapView({ container: "viewDiv", map: map, center: results[0].extent.center, zoom: 13 }); graphicsLayer.add(parcelOutlineGraphic); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍