Scope issue (maybe)

[JamesCrandall]

JS 3.x 

Code running in a custom widget from WAB

We're just trying to determine how to work with geometry from a feature service that has a spatial reference of wkid 2881 but our existing code was failing trying to load a graphics layer with the geometry throwing the error,

Geometry (wkid: 2881) cannot be converted to spatial reference of the map (wkid: 102100)

So we identified where this was happening and thought to just try and do a reprojection but I keep getting undefined geometry when I attempt to implement,

Maybe it's a simple scope issue?

getGraphicFromQueryResults: function(queryResults){
					if (queryResults && queryResults.features.length > 0){
						var theGraphic = this.createGraphicFromGeometry(queryResults.features[0].geometry);
						//theGraphic always returns undefined
						console.log(theGraphic) 
						return theGraphic //this.createGraphicFromGeometry(queryResults.features[0].geometry);
					}
				},
				
				createGraphicFromGeometry: function(geometry){
					projection.load().then(lang.hitch(this, function () {
						
						const inSpatialReference = new SpatialReference({ wkid: 2881 });
						const spSpatialReference = new SpatialReference({ wkid: 4326 });
						const poly = new Polygon(geometry, inSpatialReference);
						var geoT = projection.getTransformation(inSpatialReference, spSpatialReference)
						const projectedPoly = projection.project(poly, spSpatialReference);
					
						var attributes = {};
						attributes[this.config.applicationIdField] = this.appId;						
					
						var graphic = new Graphic(projectedPoly,null,attributes);
						console.log(graphic)

					return graphic;
				 }).bind(this))
				}

Or any comment on how to deal with with services with other spatial references than what ESRI basemaps seems to require?

[Junshan_Liu]

Hi @JamesCrandall The method "createGraphicFromGeometry" is an async function, so you need to use "await" or use the ".then()" to get the function return value.

[JamesCrandall]

thank you, do you have any suggestions where to place .then() 

[Junshan_Liu]

It should be something like this:

this.createGraphicFromGeometry(queryResults.features[0].geometry).then(theGraphic => {
  console.log(theGraphic)
})

Then, function createGraphicFromGeometry must return the promise, like this:

createGraphicFromGeometry: function () {
  return projection.load()
}

[JamesCrandall]

Thanks for taking the time to explain this!

While I was unsure how to implement your suggestion, I had just added this to the constructor of the widget:

constructor: function(args){
  				lang.mixin(this,args);
  				window.map = this.map;
				projection.load();
  			},

I don't know if pre-loading the projection in this manner is acceptable way to do it, it does work and allow a much simpler implementation of that createGraphicFromGeometry() funtion and simply returns the graphic in the desired spatref.

Again -- the whole issue I'm dealing with is working with services published to an enterprise site that have a different spatial reference than the ESRI basemap that is loaded in the webmap source to this WAB app and just doesn't play well.  So simply forcing the same spatial reference on the geometry seems to work.