1

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.

asked Jan 10, 2014 at 2:11

1 Answer 1

2

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);
 }`
answered Jan 10, 2014 at 7:45
1
  • Thank you lele3p! Your suggested changes did the trick. Besides the addition of ".geometry" within the "pt =" line, I have never really understood the impact of adding a var statement prior to the defining of a variable as opposed to putting the var component inline with the definition of the variable. Commented Jan 10, 2014 at 23:44

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.