Plot path with spatial reference conversion

JasonWood · ‎09-13-2020

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.

<!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 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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎09-16-2020

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