[GIS] Trying to label graphic using feature attribute (ArcGIS Javascript 3.7 API)

arcgis-javascript-apigraphicslabeling

I have a Dialog DIV containing an HTML list of buttons with a value for each school district. I want the user to be able to click on a button and have a polygon graphic of the district placed on the map, zoom to its location, and label the graphic with the district name.

Using A HREF (javascript:findSchoolDist('district_name')) I call the function and zoom to the extent of the returned graphic. To my understanding, when using FindTask, all attributes are returned along with the graphic.

The FindTask successfully finds the feature, returns the graphic, and zooms to its extent. The problem is I cannot get the label to appear. While I am using the Javascript 3.7 API, I am not using the AMD format so the code I am using is borrowed from a 3.5 API sample as they are coded using the legacy format.

For finding the center of the polygon so the app knows where to place the label, the require "esri.tasks.geometry" is included and I have included the Geometry Service URL under the layers as "var geometryService = new esri.tasks.GeometryService("http://gis.abag.ca.gov/arcgis/rest/services/Geometry/GeometryServer");"

The two functions that make up the tool are as follows:

function findSchoolDist(searchText) {
   map.infoWindow.hide();
   map.graphics.clear();

   //Create find task
   var schoolFindTask = new esri.tasks.FindTask("http://gis.abag.ca.gov/arcgis/rest/services/admin/abag_District_School/MapServer");

   //Build school district filter
   var schParams = new esri.tasks.FindParameters();
       schParams.returnGeometry = true;
       schParams.outSpatialReference = map.spatialReference;
       schParams.layerIds = [0];
       schParams.searchFields = ["name"];

   //Set search text and find school district
   schParams.searchText = searchText;
   schoolFindTask.execute(schParams, schShowResults);
}

function schShowResults(results) {
   var schoolSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_DIAGONAL_CROSS, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,0]), 4), new dojo.Color([0,0,255,0.25]));

   map.graphics.clear();

   dojo.forEach(results, function (result) {
      var schGraphic = result.feature;
      var schAttrib = schGraphic.attributes.name;
      schGraphic.setSymbol(schoolSymbol);
      map.graphics.add(schGraphic);
   });

   var poly = dojo.filter(results, function(r) {
      return r.feature.geometry.type === "polygon";
   });
   if ( poly.length > 0 ) {
      map.setExtent(poly[0].feature.geometry.getExtent().expand(1.5));
   } else {
      alert("No polygon results...");
   }   //WORKS UP TO THIS POINT, FAILS AFTER

   //Add district name to map
   var schFont = new esri.symbol.Font("14pt", esri.symbol.Font.STYLE_NORMAL, esri.symbol.Font.VARIANT_NORMAL, esri.symbol.Font.WEIGHT_BOLD, "Arial");

   var schTextSymbol = new esri.symbol.TextSymbol(schAttrib);
      schTextSymbol.setColor(new dojo.Color([255,0,0]));
      schTextSymbol.setAlign(esri.symbol.TextSymbol.ALIGN_MIDDLE);
      schTextSymbol.setFont(schFont);

   var pt;
      pt = schGraphic.getExtent().getCenter();
   var gra = new esri.Graphic(pt, schTextSymbol);

   map.graphics.add(gra);
}

I am hoping that someone is still using the legacy format who has experience labeling graphics.

Best Answer

Change your schShowResults:

function schShowResults(results) {
    var schoolSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_DIAGONAL_CROSS, 
      new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 255, 0]), 4), 
      new dojo.Color([0, 0, 255, 0.25]));

    map.graphics.clear();

    var schAttrib;
    var schGraphic;
    dojo.forEach(results, function(result) {
      schGraphic = result.feature;
      schAttrib = schGraphic.attributes.name;
      schGraphic.setSymbol(schoolSymbol);
      map.graphics.add(schGraphic);
    });

    var poly = dojo.filter(results, function(r) {
      return r.feature.geometry.type === "polygon";
    });
    if (poly.length > 0) {
      map.setExtent(poly[0].feature.geometry.getExtent().expand(1.5));
    } else {
      alert("No polygon results...");
    }

    //Add district name to map
    var schFont = new esri.symbol.Font("14pt",
      esri.symbol.Font.STYLE_NORMAL,
      esri.symbol.Font.VARIANT_NORMAL,
      esri.symbol.Font.WEIGHT_BOLD, "Arial");

    var schTextSymbol = new esri.symbol.TextSymbol(schAttrib);
    schTextSymbol.setColor(new dojo.Color([255, 0, 0]));

    schTextSymbol.setAlign(esri.symbol.TextSymbol.ALIGN_MIDDLE);
    schTextSymbol.setFont(schFont);

    var pt;
    pt = schGraphic.geometry.getExtent().getCenter();

    var gra = new esri.Graphic(pt, schTextSymbol);

    map.graphics.add(gra);
  }`
Related Question