topic Re: ArcGIS Javascript API - GraphicsLayer misalignment in ArcGIS Server with JavaScript API Questions

ArcGIS Javascript API - GraphicsLayer misalignment

AdamValair — Tue, 09 Jun 2015 01:08:42 GMT

Howdy ESRI Community.

I have a layer misalignment that I cannot explain.

The details:

- ArcGIS js api v3.12.

- IE7.

- map loads with streets basemap.

- one ArcGISDynamicMapServiceLayer: projection set to:

WGS_1984_Web_Mercator

WKID: 3785 Authority: EPSG

- when a queryTask is executed against the ArcGISDynamicMapServiceLayer, the results are dumped into a graphicLayer.

Screenshot of misalignment (red features are in the graphicsLayer):

I can confirm that:

- the spatial reference of the map object's extent seems to be set correctly:

latestWkid: 3857

wkid: 102100

- the spatial reference of the graphics objects seem to be correct (sample of one of the objects):

latestWkid: 3857

wkid: 102100

- the spatial reference of the basemap layer object also seems to be correct:

latestWkid: 3857

wkid: 102100

Any super duper GIS people out there with an idea?

If all the projections are the same, why the misalignment?

Thanks!

Re: ArcGIS Javascript API - GraphicsLayer misalignment

JakeSkinner — Tue, 09 Jun 2015 11:52:47 GMT

Hi Adam,

Can you post your code?

Also, does this occur in all browsers, or just IE7?

Re: ArcGIS Javascript API - GraphicsLayer misalignment

AdamValair — Sun, 12 Dec 2021 10:36:15 GMT

Hey Jake Skinner,

I'm developing for IE7 but the shift appears in Chrome, FF, and IE (edge).

The dynamic map service is published by ArcGIS Server 10.2.

I've stripped out what I think are the relevant pieces of code. Let me know if there's anything else I can provide.

//Query by extent tool:
registry.byId("tool_AssetQueryExtent").on("click", function () {
  toolbar_draw.activate(Draw["EXTENT"]);
});
toolbar_draw.on("draw-end", function(evt){
  //Execute query:
  doQueryFeatureService_spatial(evt);
});


function doQueryFeatureService_spatial(draw_event){


  //console.log(app.feature_service_info);
  clearQueryResults(dijit_id_results_target_container); //Clear any previous results (graphics and grids/tabs)


  var queries =[];
  var tmp_query;
  var tmp_queryTask;
  var query_geom;
  var layer_object;
  var layer_info;
  var sublayer_id;


  //If the user query came from a point-click then convert to extent before running the query:
  if (draw_event.geometry.type == "point"){query_geom = makeExtentFromGeometryPoint(draw_event.geometry);}
  else {query_geom = draw_event.geometry;}


  //Execute the query:
  //Loop over selected layer ids in the selected query layer object (maintained by layer selector dijit):
  for (var i=0;i<app.selected_query_layers["the_layers"].length;i++){
  sublayer_id =  app.selected_query_layers[map_layer_id];
  layer_info = getLayerInfo(layer_object,sublayer_id);


  //Skip any group layers:
  if(layer_info.type == "Group Layer"){continue;}


  tmp_query = new esri.tasks.Query();
  tmp_query.geometry = query_geom;
  tmp_query.returnGeometry = true;
  tmp_query.outFields = ["*"];
  tmp_query.Token = app.credentials.cred_feature_service.token; //This is initialized by the createFeatureServiceInfo function. WIll be a FAKE null token if using the proxy.
  tmp_queryTask = new esri.tasks.QueryTask(url_arcgis_feature_service + "/" + sublayer_id); //featureLayer url


  console.log("About to execute querytask on:" + url_arcgis_feature_service + "/" + sublayer_id);


  //Wrap the execute in an IFFE so that it is run right away (not after the loop finishes)
  (function(layer_info_object){
  //Execute the task:
  tmp_queryTask.execute(tmp_query, function (queryResults) {


  //Groups features into arrays in an object whose keys are layer ids.
  //Creates string properties and assigns to features
  //for retrieval later on.
  var processed_results = processQueryResults(queryResults.features, layer_info_object);

  //Add results to graphics layers
  highlightGraphics(processed_results, false); 


  //Send the results to the grids:
  app.results_grid.populateResultTables_dGrid(processed_results, dijit_id_results_target_container, app.feature_service_info);

  }, function (error) {
  console.log("Error executing query: ");
  console.log(error);
  console.log(layer_info_object);
  }); //End execute task
  }(layer_info)); //End immediately-invoked anyonmous function call --- "layer_info" is passed as a parameter to the anonymous function.
  }//end inner loop.
}


/*Create Graphics layer and add to map: */
graphicsLayer_highlight = new GraphicsLayer();
map_object.addLayer(graphicsLayer_highlight);


function highlightGraphics(processed_results,clear_previous){
  console.log(processed_results);
  if (clear_previous){
  graphicsLayer_highlight.clear();
  }


  var layer; //holds one-feature layer objects 
  var feature;
  var graphic;
  var symbol;


  //Go over the processed results, adding features to the graphics layer:
  for (var layer_group_key in processed_results){
  for (var i=0;i<processed_results[layer_group_key].length;i++){


  layer = processed_results[layer_group_key];


  if ((layer.feature.geometry.type == "point")|| (layer.feature.geometry.type == "multipoint")){symbol = symbol_highlight_results_POINT;}
  else if (layer.feature.geometry.type == "polyline"){symbol = symbol_highlight_results_LINE;}
  else if (layer.feature.geometry.type == "polygon") {symbol = symbol_highlight_results_POLYGON;}


  layer.feature.setSymbol(symbol);


  //Add the graphic and hold the object so we can insert the originating layer id:
  graphic = graphicsLayer_highlight.add(layer.feature);
  graphic.originating_layer_id = layer.layerId;
  console.log(graphic);
  console.log(map);
  }
  }
  graphicsLayer_highlight.redraw();
}

Re: ArcGIS Javascript API - GraphicsLayer misalignment

AdamValair — Wed, 10 Jun 2015 15:55:30 GMT

I'm starting to think there is a projection problem with the data itself. I will post when I get it sorted.

Re: ArcGIS Javascript API - GraphicsLayer misalignment

AdamValair — Wed, 10 Jun 2015 20:35:17 GMT

OK, so the problem seems to be that my data is in NAD83_UTM_10N and I'm publishing the map service as WGS_1984_Web_Mercator.

If I set the dataframe in my mxd to WGS_1984_Web_Mercator and then publish, the features line up nicely in the map but I get reprojection exceptions in chrome when I dump queryTask results into a graphics layer:

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

I think that using the standard basemap layer I need to use the WGS_1984_Web_Mercator projection, which is fine. But how to I make things line up with my NAD83_UTM_10N data?

Again, when my mxd is published with the projection set to WGS_1984_Web_Mercator, the Basemap and ArcGISDynamicMapServiceLayer tiles line up as expected. The problem arises when I go to load queryTask results into a GraphicsLayer.

Is there some best practice for publishing data in differing projections that I am missing here?

Re: ArcGIS Javascript API - GraphicsLayer misalignment

JakeSkinner — Thu, 11 Jun 2015 10:24:22 GMT

Hi Adam,

Try setting the query results to the NAD_1983_UTM_Zone_10N (26910) coordinate system using the outSpatialReference property to see if this fixes the issue. Ex:

tmp_query.outSpatialReference =  new SpatialReference(26910);

Re: ArcGIS Javascript API - GraphicsLayer misalignment

AdamValair — Thu, 11 Jun 2015 15:14:59 GMT

Jake Skinner: that seems be it! I assumed that since my map service was published using (102100), any features coming out of it would have that projection. Apparently that isn't so.

So query results had to be requested in web mercator (102100) because that's my app's projection:

tmp_query.outSpatialReference =  new SpatialReference(102100);

I had been digging through the properties of the graphics objects and they all had their spatial reference properties correctly set (to 102100) even though their coordinates were wonky. Meh, I don't get that, but who cares, it's working!

Thanks!!