Javascript 4.4 display Point Graphics with certain wkid in basemap

MichaelLodes2 · ‎08-13-2017

Hi,

I want to display my point graphics with wkid 31468 in the standard basemap (wkid 4326). My code is below. Do I need any further transformation of my point objects? Can I work with GeometryService class for that?

Please help me. I'm sure its not difficult.

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/geometry/Polyline",
      "esri/geometry/Polygon",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/layers/FeatureLayer",
      "esri/symbols/SimpleFillSymbol",
      "dojo/domReady!"
    ], function(
      Map, MapView,
      Graphic, Point, Polyline, Polygon,FeatureLayer,
      SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol
    ) {
          
      var map = new Map({
        basemap: "hybrid"
        
      });

      var view = new MapView({
        center: [10.755767, 48.179992],
        container: "viewDiv",
        map: map,
        zoom: 15
      });

      var point = new Point({
        longitude: 4407610.834,
        latitude: 5338804.822,
        spatialReference: { wkid: 31468 }
      });


      var markerSymbol = new SimpleMarkerSymbol({
        color: [226, 119, 40],
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 2
        }
      });


      var pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
      });

      

      view.graphics.addMany([pointGraphic]);
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

KenBuja · ‎08-14-2017

There were a few problems with your code. First off, the order of the modules in the require didn't match the order of the arguments in the function (FeatureLayer). Next, points can be added with a WKID of 4326 (WGS84) or 102100,102113, or 3875 (Web Mercator) without needing to be projected. Since you're using another one, you'll have to use a Geometry Service to project your point in 31468 (DHDN / 3-degree Gauss-Kruger zone 3). Finally, you're not using lat/long coordinates in your point, but x/y, so you have to use those properties when constructing the point.

This code shows your point

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Get started with MapView - Create a 2D map - 4.4</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
  <script src="https://js.arcgis.com/4.4/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/geometry/Polyline",
      "esri/geometry/Polygon",
      "esri/layers/FeatureLayer",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "esri/tasks/GeometryService",
      "esri/tasks/support/ProjectParameters",
      "esri/geometry/SpatialReference",
      "dojo/domReady!"
    ], function (Map, MapView, Graphic, Point, Polyline, Polygon, FeatureLayer,
      SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, GeometryService, ProjectParameters, SpatialReference
) {

      var map = new Map({
        basemap: "hybrid"

      });

      var view = new MapView({
        center: [10.755767, 48.179992],
        container: "viewDiv",
        map: map,
        zoom: 10
      });

      var point = new Point({
        x: 4407610.834,
        y: 5338804.822,
        spatialReference: { wkid: 31468 }
      });

      var gsvc = new GeometryService("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
      var outSR = new SpatialReference({ wkid: 4326 });

      var markerSymbol = new SimpleMarkerSymbol({
        color: [226, 119, 40],
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 2
        }
      });

      var params = new ProjectParameters();
      params.geometries = [point];
      params.outSpatialReference = outSR;
      //params.transformation = transformation;
      gsvc.project(params).then(function (projectedGeometries) {
        P = projectedGeometries[0];
        var pointGraphic = new Graphic({
          geometry: P,
          symbol: markerSymbol
        });
        view.graphics.addMany([pointGraphic]);
      });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

KenBuja · ‎08-14-2017

There were a few problems with your code. First off, the order of the modules in the require didn't match the order of the arguments in the function (FeatureLayer). Next, points can be added with a WKID of 4326 (WGS84) or 102100,102113, or 3875 (Web Mercator) without needing to be projected. Since you're using another one, you'll have to use a Geometry Service to project your point in 31468 (DHDN / 3-degree Gauss-Kruger zone 3). Finally, you're not using lat/long coordinates in your point, but x/y, so you have to use those properties when constructing the point.

This code shows your point

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Get started with MapView - Create a 2D map - 4.4</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
  <script src="https://js.arcgis.com/4.4/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/geometry/Point",
      "esri/geometry/Polyline",
      "esri/geometry/Polygon",
      "esri/layers/FeatureLayer",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleFillSymbol",
      "esri/tasks/GeometryService",
      "esri/tasks/support/ProjectParameters",
      "esri/geometry/SpatialReference",
      "dojo/domReady!"
    ], function (Map, MapView, Graphic, Point, Polyline, Polygon, FeatureLayer,
      SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, GeometryService, ProjectParameters, SpatialReference
) {

      var map = new Map({
        basemap: "hybrid"

      });

      var view = new MapView({
        center: [10.755767, 48.179992],
        container: "viewDiv",
        map: map,
        zoom: 10
      });

      var point = new Point({
        x: 4407610.834,
        y: 5338804.822,
        spatialReference: { wkid: 31468 }
      });

      var gsvc = new GeometryService("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
      var outSR = new SpatialReference({ wkid: 4326 });

      var markerSymbol = new SimpleMarkerSymbol({
        color: [226, 119, 40],
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 2
        }
      });

      var params = new ProjectParameters();
      params.geometries = [point];
      params.outSpatialReference = outSR;
      //params.transformation = transformation;
      gsvc.project(params).then(function (projectedGeometries) {
        P = projectedGeometries[0];
        var pointGraphic = new Graphic({
          geometry: P,
          symbol: markerSymbol
        });
        view.graphics.addMany([pointGraphic]);
      });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

MichaelLodes2 · ‎08-21-2017

Hello Ken,

that workes for me. Thank you also for the hint with right order of arguments .

I modified your code for displaying multipoints:

      var multipoint = new Multipoint({
          spatialReference: { wkid: 31468 }
      });
      
    multipoint.addPoint(new Point(4407610.834, 5338804.822));
    multipoint.addPoint(new Point(4407725.465, 5338593.660));‍‍‍‍‍‍

and then:

params.geometries = [multipoint];‍

Michael