identify not on the point I click

[TracySchloss]

I have a map service that contains 3 layers, representing the new house, senate and congressional districts.  I have set up an identify task to open a popupTemplate that will show the district number, photo and link to their web page. 

The identify isn't executing where I click, it's using a point about 20 miles south. This is based on the sample "Display identify results in popup", the 2nd one in the samples list.  Someone needs to rename one of these, there should be two sample by the same name!).

I also want my identify to execute after an address is added.  That seems to be working, but maybe my modifications to make that happen are part of the problem.  I'm attaching my full code, since I might have chopped too much making it fit in this posting.

    <script type="text/javascript">        dojo.require("dijit.layout.BorderContainer");        dojo.require("dijit.layout.ContentPane");        dojo.require("esri.map");        dojo.require("esri.tasks.locator");       dojo.require("esri.dijit.Popup");         dojo.require("esri.dijit.Legend");       dojo.require("dijit.form.CheckBox");                 var map;        var spatialReference;       var locator;       var identifyTask,identifyParams;        var districtLayer;       var pathName = "http://myserver/ArcGIS/rest/services";       var identifyLocator = false;       var senateTemplate;       var houseTemplate;       var congressTemplate;                     function init() {           spatialReference = new esri.SpatialReference({wkid: 102100 });         startExtent = new esri.geometry.Extent(-10583000, 4287025, -9979000, 4980462, spatialReference);         //setup the popup window           var popup = new esri.dijit.Popup({            fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.50]))          }, dojo.create("div"));               map = new esri.Map("map",{            infoWindow:popup,            extent:startExtent          });                   locator = new esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");          dojo.connect(locator, "onAddressToLocationsComplete", showResults);           var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");          map.addLayer(basemap);              districtLayer = new esri.layers.ArcGISDynamicMapServiceLayer(pathName+"/legisDistrict/MapServer",{id:'districts'});         map.addLayer(districtLayer);                      senateTemplate = new esri.dijit.PopupTemplate({              title: "Senate District {District}",              mediaInfos: [{                  "title": "{District}",                  "caption": "{Name}",                  "type": "image",                  "value": {                  "sourceURL": "{photoLink}",                  "linkURL": "" }               }],             fieldInfos: [                  { fieldName: "webLink", label: "Open Web Page" , visible: true }]             });                   houseTemplate = new esri.dijit.PopupTemplate({                  title: "House District {District}",                  mediaInfos: [{                      "title": "{District}",                      "caption": "{Name}",                      "type": "image",                      "value": {                      "sourceURL": "{photoLink}",                      "linkURL": "" }                   }],                 fieldInfos: [                      { fieldName: "webLink", label: "Open Representatives's Web Page" , visible: true }]                 });               dojo.connect(map,"onLoad",mapReady);        }                function mapReady(map){           //identify task is the same layer as districtLayer added above         identifyTask = new esri.tasks.IdentifyTask(pathName + "/legisDistrict/MapServer");         identifyParams = new esri.tasks.IdentifyParameters();         identifyParams.tolerance = 3; //         identifyParams.returnGeometry = true;         identifyParams.layerIds = [0, 1, 2];         identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;         identifyParams.spatialReference = spatialReference;                  identifyParams.width = map.width;         identifyParams.height = map.height;                  dojo.connect(map, "onClick", executeIdentifyTask);                  //resize the map when the browser resizes          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);     }                function executeIdentifyTask(evt) {             identifyParams.mapExtent = map.extent;        identifyParams.geometry = evt.mapPoint;              var deferred = identifyTask.execute(identifyParams);               //identify runs from geocoded point and not just click                if (identifyLocator) { // geometry is coming from address function            identifyParams.geometry = evt;        }          deferred.addCallback(function(response) {                 // response is an array of identify result objects                // Let's return an array of features.            return dojo.map(response, function(result) {              var feature = result.feature;              feature.attributes.layerName = result.layerName;               if(result.layerName === 'senate'){              console.log("Senate District: " & feature.attributes.District);                feature.setInfoTemplate(senateTemplate);              }              else if (result.layerName === 'house'){              console.log("House District: " & feature.attributes.District);               feature.setInfoTemplate(houseTemplate);              } else {                 console.log("congress not defined - create template for it");             }             identifyLocator = false;             return feature;                         });          });          map.infoWindow.setFeatures([ deferred ]);          map.infoWindow.show(evt.mapPoint);             }               dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});       }            dojo.addOnLoad(init);      </script>    </head>        <body class="claro">      <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"  style="width: 100%; height: 100%; margin: 0;">             <div id="mainHeader" dojotype="dijit.layout.ContentPane" region="top" >              Missouri Legislative Districts             <div id="subheader"> 2010 District Boundaries                 <div id="divAddress" style="position:absolute; top:10px; right:25px; z-index:999;">                      <input id="txtAddress" style="width:250px" type="text"  value="Find address or place" class="textBox" onclick="clearTextInput();" />                      <button id="btnGO" dojotype="dijit.form.Button" onClick="locate();">GO</button>                  </div>             </div>            </div>       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" >                               <div dojoType="dijit.form.Button" id="btnHouse" class="togglebutton" onClick="toggleLayer(1);">                       House Districts                   </div>                   <div dojoType="dijit.form.Button" id="btnSenate" class="togglebutton" onClick="toggleLayer(0);">                       Senate Districts                    </div>                   <div dojoType="dijit.form.Button" id="btnCongress" class="togglebutton" onClick="toggleBaseLayer(2);">                       Congressional Districts            </div>                      </div>           </div>     </div>    </body>    </html> 

[derekswingley1]

Thanks for the repro case that shows the issue, that makes this kind of thing so much easier to debug :).

The issue is that your buttons are pushing the map down. Here's one possible fix: http://jsfiddle.net/RtSHP/

I added this in the style tag in the head:

      #btnWrapper {
        position: absolute;
        z-index: 10;
        top: 0px;
        left: 30px;
      }

And modified the markup for the map:

      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
        <div id="btnWrapper">
          <div dojoType="dijit.form.Button" id="btnHouse" class="togglebutton" onClick="toggleLayer(1);">House Districts</div>
          <div dojoType="dijit.form.Button" id="btnSenate"class="togglebutton" onClick="toggleLayer(0);">Senate Districts</div>
          <div dojoType="dijit.form.Button" id="btnCongress"class="togglebutton" onClick="toggleBaseLayer(2);">Congressional Districts</div>
        </div>
      </div>

I didn't change any of the JavaScript.

[TracySchloss · Accepted solution]

I'm fine with the buttons being on the map, so this solution works for me.  Now that my identify is in the right place, I notice the returned feature doesn't contain all the attributes - only the text fields!

I have fields for Population and District, both defined as numeric.  When I look at the attributes from the identified feature, I only see name,photoLink and pageLink, which are defined as text.  There's nothing explicit in identify that limits the fields returned is there?  I have checked and rechecked the services and all fields are included at that point.

[derekswingley1]

Your popup templates, senateTemplate and houseTemplate, use specific fields. To see more attribute fields in your popup, modify your popup templates.

[TracySchloss]

I do have the District in the title with the curly braces, which doesn't come up.  I added an entry to the popuptemplate for fieldName, but the district number never appears in any place I put it.

  

  senateTemplate = new esri.dijit.PopupTemplate({ 
            title: "Senate District {District}", 
            mediaInfos: [{ 
                "title": "{District}", 
                "caption": "{Name}", 
                "type": "image", 
                "value": { 
                "sourceURL": "{photoLink}", 
                "linkURL": "" } 
             }],
            fieldInfos: [ 
            { fieldName: "District", label: "Senate District" , visible: true, format:{places: 0} } ,
                {fieldName: "webLink", label: "Open Web Page" , visible: true }]
   
        }); 
        
        houseTemplate = new esri.dijit.PopupTemplate({ 
                title: "House District {District}", 
                mediaInfos: [{ 
                    "title": "{District}", 
                    "caption": "{Name}", 
                    "type": "image", 
                    "value": { 
                    "sourceURL": "{photoLink}", 
                    "linkURL": "" } 
                 }],
                fieldInfos: [ 
                { fieldName: "District", label: "House District" , visible: true, format:{places: 0} } ,
                    { fieldName: "webLink", label: "Open Web Page" , visible: true }]      
        });

I set a breakpoint in my callback function on the feature variable and looked at the what is returned for attributes. I only see the attributes that are for the text fields.  I don't understand why at this point in the code, it has anything to do with the format of my popup templates anyway.  I don't think the values are ever found and that's why it doesn't appear in the popup template.  I have control over this service, so I can change the District field to be text, but that's much of an answer and I won't always be able to control the field types.

function executeIdentifyTask(evt) {      
      identifyParams.mapExtent = map.extent; 
      identifyParams.geometry = evt.mapPoint;
      
      var deferred = identifyTask.execute(identifyParams); 
         
   //identify runs from geocoded point and not just click        
       if (identifyLocator) { // geometry is coming from address function
           identifyParams.geometry = evt;
       } 
        deferred.addCallback(function(response) {      
          // response is an array of identify result objects     
          // Let's return an array of features. 
          return dojo.map(response, function(result) { 
            var feature = result.feature; 
            feature.attributes.layerName = result.layerName; 
            if(result.layerName === 'senate'){ 
            console.log("Senate District: " & feature.attributes.District);
               feature.setInfoTemplate(senateTemplate); 
            } 
            else if (result.layerName === 'house'){ 
            console.log("House District: " & feature.attributes.District);
              feature.setInfoTemplate(houseTemplate); 
            } else {
                console.log("congress not defined - create template for it");
            }

            identifyLocator = false;
            return feature; 
            
          }); 
        }); 
 
        // InfoWindow expects an array of features from each deferred 
        // object that you pass. If the response from the task execution  
        // above is not an array of features, then you need to add a callback 
        // like the one above to post-process the response and return an 
        // array of features. 
        map.infoWindow.setFeatures([ deferred ]); 
        map.infoWindow.show(evt.mapPoint); 
    
      }