Javascript 4.4 display Point Graphics with certain wkid in basemap

Question

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 · Accepted Answer

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