ArcGIS JavaScript API Drawing Graphics to Wrong Places

Question

I am working on a web application using ArcGIS JavaScript API. I used query and got a group of graphics. However, the map.graphics.add draws the graphics to wrong locations. They should be in Arizona but are located to west coast of Africa. I checked this article: https://stackoverflow.com/questions/17058843/arcgis-javascript-api-need-to-change-wkid-of-the-graphics-layer
and used the method mentioned. It seems the method doesn’t apply to my situation. Even when the map, graphics layer and graphics all have the same spatial reference, the graphics are drew to Africa. Do you know why I get this weird issue? Here is the link of the web application: http://www.public.asu.edu/~jzhan300/HCIC/HCICInteractiveMap.html
When you click the select button and then hit apply in the lower left corner, it should draw graphics.
The link of the js file:
http://www.public.asu.edu/~jzhan300/HCIC/HCICInteractiveMap.js

Answer 1

Here are two suggestions:

1. Keep working with the Query/QueryTask and specify the outSpatialReference https://developers.arcgis.com/javascript/3/jsapi/query-amd.html#outspatialreference

2. Instead of using the Query/QueryTask, use the FeatureLayer and it's setDefinitionExpression() method instead. This will usually perform better: https://developers.arcgis.com/javascript/3/jsapi/featurelayer-amd.html#setdefinitionexpression

Answer 2

I changed the map service's coordinate system to WGS 1984 and it works. Still curious about if there is a way to change the map's projection to feature layer's.