AnsweredAssumed Answered

Spatial Reference Problems?

Question asked by crackernutter on May 4, 2012
Latest reply on May 4, 2012 by crackernutter
Hi, I'm experiencing some problems with my map, and think it may have to go with spatial references and coordinate systems, and would love some clarification on how these work with maps, feature layers, and mouse events, etc.  I essentially copied the sample code from http://help.arcgis.com/en/webapi/javascript/arcgis/demos/ed/ed_attribute_inspector.html, only replacing the map service URLs, the initial extent and spatial reference, and the field infos for the popup.  The listener is supposed to detect a mouse click on a road obstructions graphic, and display a infoWindow with the appropriate fields.  I'm not interested in necessarily getting the infoWindow to display, but the service can't event detect that I clicked on a road obstruction graphic (see line 113 that logs some text to the console if a feature was found)?  The spatial reference of my map, map service, and layers are all 102113 (Web Mercator).  My data is in an ArcSDE feature dataset, also with a Web Mercator coordinate system.  So when I click on the map, why doesn't it detect that I have clicked on a the graphic that is so clearly displayed on that map? 
You can reproduce with my code here...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior of the samples        on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">     <style>       html, body {          height: 98%; width: 98%;          padding: 0;         overflow:hidden;       }       #mapDiv{         padding:0;         border: solid 2px #705B35;       }       .roundedCorners {         -moz-border-radius: 4px;         border-radius: 4px;       }       #detailPane{         height:20px;         color:#570026;         font-size:12pt;         font-weight:600;         overflow:hidden;       }       .dj_ie .infowindow .window .top .right .user .content { position: relative; }       .dj_ie .simpleInfoWindow .content {position: relative;}        .esriAttributeInspector {height:100px;}       .esriAttributeInspector .atiLayerName {display:none;}       .saveButton {         padding-left:45px;          margin:0px;width:16px; height:16px;        }     </style>          <script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>      <script type="text/javascript" language="Javascript">       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.dijit.AttributeInspector-all");         var map;       var updateFeature;              function init() {         //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to           //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic          //for details on setting up a proxy page.         esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";          var initialExtent = new esri.geometry.Extent({"xmin":-8584936.075899996,"ymin":4691869.096699994,"xmax":-8561487.160099998,"ymax":4721092.926799998,"spatialReference":{"wkid":102113}});          map = new esri.Map("mapDiv", {extent:initialExtent, spatialReference:{"wkid":102113}});                  dojo.connect(map, "onLoad", function() {           //resize the map when the browser resizes           dojo.connect(dijit.byId('mapDiv'), 'resize', map,map.resize);         });                  dojo.connect(map, "onLayersAddResult", initSelectToolbar);                  var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");         map.addLayer(tiledLayer);            var editable = new esri.layers.ArcGISDynamicMapServiceLayer("http://129.2.24.163/ArcGIS/rest/services/Capstone_Projects/JayGregEdit/MapServer");         editable.setDisableClientCaching(true);                  map.addLayer(editable);            var roadObs = new esri.layers.FeatureLayer("http://129.2.24.163/ArcGIS/rest/services/Capstone_Projects/JayGregEdit/FeatureServer/1", {           mode: esri.layers.FeatureLayer.MODE_SELECTION,           outFields: ["*"]         });          var selectionSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color("yellow"), 2),null);         roadObs.setSelectionSymbol(selectionSymbol);          dojo.connect(roadObs, "onEditsComplete", function() {           petroFieldsMSL.refresh();         });          map.addLayers([roadObs]);       }          function initSelectToolbar(results) {                   var roadObs = results[0].layer;         var selectQuery = new esri.tasks.Query();           dojo.connect(map, "onClick", function(evt) {           selectQuery.geometry = evt.mapPoint;           roadObs.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, function(features) {             if (features.length > 0) {              console.log("found");     //store the current feature               updateFeature = features[0];               map.infoWindow.setTitle(features[0].getLayer().name);               map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));             } else {      console.log("nothing found");               map.infoWindow.hide();             }           });          });          dojo.connect(map.infoWindow, "onHide", function() {           roadObs.clearSelection();         });            var layerInfos = [{'featureLayer':roadObs,            'showAttachments':false,            'isEditable': true,            'fieldInfos': [            {'fieldName': 'DESCRIPTION', 'isEditable':true, 'tooltip': 'Short Description', 'label':'Description:'},            {'fieldName': 'DATE_REPORTED', 'isEditable':true, 'tooltip': 'Report Date', 'label':'Date'},            {'fieldName': 'STATUS', 'isEditable':true,'label':'Status:'}            ]}];                    var attInspector = new esri.dijit.AttributeInspector({           layerInfos:layerInfos           },           dojo.create("div")         );                  //add a save button next to the delete button         var saveButton = new dijit.form.Button({label:"Save","class":"saveButton"});         dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");                         dojo.connect(saveButton,"onClick",function(){            updateFeature.getLayer().applyEdits(null, [updateFeature], null);                  });                   dojo.connect(attInspector, "onAttributeChange", function(feature,fieldName,newFieldValue) {           //store the updates to apply when the save button is clicked             updateFeature.attributes[fieldName] = newFieldValue;         });                  dojo.connect(attInspector,"onNext",function(feature){           updateFeature = feature;           console.log("Next " + updateFeature.attributes.objectid);         });                   dojo.connect(attInspector, "onDelete",function(feature){           feature.getLayer().applyEdits(null,null,[feature]);           map.infoWindow.hide();         });                           map.infoWindow.setContent(attInspector.domNode);         map.infoWindow.resize(325,210);         }        dojo.addOnLoad(init);      </script>   </head>      <body class="claro">     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">       <div id="detailPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">         Click a field to display the attribute inspector with customized fields.       </div>       <div data-dojo-type="dijit.layout.ContentPane" class="roundedCorners" data-dojo-props="region:'center'" id="mapDiv"></div>     </div>   </body> </html>


Thanks for any help you can offer. 

Jay

Outcomes