Add graphic to query result

Anonymous User

I have some code that zooms to a query result extent, but I also want to highlight the query result. Console shows I'm returning an object but i cant seem to add the "highlightSymbol" to it. Any help is much appreciated:

  //Highlight Symbol
  var highlightSymbol = new SimpleFillSymbol(
  SimpleFillSymbol.STYLE_SOLID,
  new SimpleLineSymbol(
  SimpleLineSymbol.STYLE_SOLID,
  new Color([255, 0, 0]), 3),
  new Color([125, 125, 125, 0.2]));

  //Query BLOCK/LOT
  var queryTask = new QueryTask(parcels.url);

  var query = new Query();
  query.returnGeometry = true;
  query.outFields = ["*"];
  on(dom.byId("execute"), "click", execute);

  function execute() {
  map.graphics.clear();

  query.where = "SSN = '" + dijit.byId("muniSelect").value + "' AND BLOCK = '" + dom.byId("block").value + "' AND LOT = '" + dom.byId("lot").value + "'";
  queryTask.execute(query, showResults);
  }
  function showResults(results) {
  var resultItems = [];
  var resultCount = results.features.length;
  for (var i = 0; i < resultCount; i++) {
  var featureAttributes = results.features.attributes;
  for (var attr in featureAttributes) {
  resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
  }
  resultItems.push("<br>");
  }
  if (resultCount === 0) {
  dom.byId("info").innerHTML = "<h3 style = 'color:#E60000'> No Record Found </h1>";
  } else {
  dom.byId("info").innerHTML = resultItems.join("");

  //Zoom to Result & Set Query Result Symbol
  var resultGraphic = new Graphic(results.features, highlightSymbol);
  var resultExtent = graphicsUtils.graphicsExtent(results.features);
  map.graphics.add(resultGraphic);
  map.setExtent(resultExtent.expand(2));

  console.log("resultGraphic:", (results.features));
  }
  }

JakeSkinner

Hi Ian,

I don't believe you will be able to pass an object to the geometry property of the Graphic class.  You can iterate through the features array of the object and then apply the highlight symbol to each feature.  Ex:

function highlightResults(results){
  array.map(results.features, function (result) {
   var graphic = result;
   graphic.setSymbol(pointHighlightSymbol);
   map.graphics.add(graphic);
  });

  var resultExtent = graphicsUtils.graphicsExtent(results.features);  
  map.setExtent(resultExtent.expand(2)); 

}

Here is a JS Fiddle that demonstrates this.  After clicking on a county, the cities within the county will be selected and then zoomed to.