Identify doesn't work

KevinBelton · ‎03-17-2011

Hi All, This is my first time of putting a Javascript site together and have limited JS skills. I have taken the code attached from the ESRI blog and changed it to suit my local point data and tiled data. I can get it to zoom to the correct extent and show the feature graphic on the map but I can not get the identify onclick to work. Once I have this working I'm hoping I could add a hover over option and a open identify data immediately as well. I'm hoping a generous person out there might help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <meta name="generator" content="HTML Tidy, see www.w3.org">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Using Dojo.Filter()</title>
    <link rel="stylesheet" type="text/css" href=
    "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" type="text/css" href=
    "http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dojox/grid/resources/Grid.css">
    <style type="text/css">
      body,html,#main{margin:0;padding:0;height:100%;width:100%;}
    </style>

    <script type="text/javascript">var djConfig = { parseOnLoad:true };</script>
    <script type="text/javascript" src=
        "http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
   <script type="text/javascript">
     dojo.require("dijit.dijit"); // optimize: load dijit layer
     dojo.require("dijit.layout.BorderContainer");
     dojo.require("dijit.layout.ContentPane");
     dojo.require("esri.map");
     dojo.require("esri.tasks.query");

     var map,resizeTimer;

     function init(){
      map = new esri.Map("map", {
      extent: new esri.geometry.Extent(
              321397, 859717, 325397, 863717,
              new esri.SpatialReference({wkid:27700})),showInfoWindowOnClick:false
      });
      map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://localhost/ArcGIS/rest/services/Maps/base/MapServer"));
        
      //initialize & execute query
      var queryTask = new esri.tasks.QueryTask("http://localhost/ArcGIS/rest/services/Maps/blpu/MapServer/0"      );
      var query = new esri.tasks.Query();
      query.where = "Y = '861717'";
      query.returnGeometry = true;
      query.outFields = ["UPRN"];
      queryTask.execute(query, addPointsToMap);

      //add logic to resize the map when the browser size changes
      dojo.connect(dijit.byId('map'), 'resize', function() {
        resizeMap();
      });
     }
     
      //add points to map and set their symbology + info template
     function addPointsToMap(featureSet) {
      //Define symbology
      var defaultRenderer = new esri.renderer.SimpleRenderer(
              new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,255,255,0.50])));
      map.graphics.setRenderer(defaultRenderer);

      var features = featureSet.features;
      dojo.forEach(features,function(feature){
        map.graphics.add(feature);
      });
      dojo.connect(map.graphics,"onClick",identifyFeatures);
     }

     function identifyFeatures(evt){
      var extentGeom = pointToExtent(map,evt.mapPoint,10);
      var filteredGraphics = dojo.filter(map.graphics.graphics, function(graphic) {
        return extentGeom.contains(graphic.geometry);
      });

      var content = "";
      content = "<i>Total Features: " + filteredGraphics.length + "<\/i>";
      content += "<table border='0' style='width:100%;text-align: left;'><tr><th>UPRN<\/th><\/tr>";

      //Build a table containing a row for each feature found
      dojo.forEach(filteredGraphics,function(row){
        content += "<tr style='width:100%;text-align:left'><td>" +
              row.attributes.UPRN + "<\/td><td>";
      });
      content += "<\/table>";

      map.infoWindow.setContent(content);
      map.infoWindow.setTitle("Identify Results");
      map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
    }
   function pointToExtent(/*esri.Map*/ map, /*esri.geometry.Point (in map coords)*/ point, /*Number*/ toleranceInPixel) {
    //calculate map coords represented per pixel
    var pixelWidth = map.extent.getWidth() / map.width;
    //calculate map coords for tolerance in pixel
    var toleraceInMapCoords = toleranceInPixel * pixelWidth;
    //calculate & return computed extent
    return new esri.geometry.Extent( point.x - toleraceInMapCoords,
      point.y - toleraceInMapCoords,
      point.x + toleraceInMapCoords,
      point.y + toleraceInMapCoords,
      map.spatialReference );
    }

  //Handle resize of browser
  function resizeMap() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      map.resize();
      map.reposition();
    }, 500);
  }

  dojo.addOnLoad(init);
 </script>
 </head>

  <body class="tundra">
    <div dojotype="dijit.layout.BorderContainer" design="headline"
        gutters="false" style="width: 100%; height: 100%; margin: 0;">
      <div id="header" dojotype="dijit.layout.ContentPane" region="top" style="height:20px;">

      Click on a graphic to view attribute information for all the graphics under the cursor.
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region=
          "center" style="overflow:hidden;">
      </div>
    </div>
  </body>
</html>
</html>