PopupTemplate with promise

This sample shows how to populate the content of a PopupTemplate using a function that returns a promise. This function returns a formatted string when a QueryTask executes successfully.

The feature layer's PopupTemplate.content is set via the queryBlockGroups function.

var countiesLayer = new FeatureLayer({
  ...
  // create a new popupTemplate for the layer
  popupTemplate: {
    title: "County of {NAME}",
    content: queryBlockGroups
  }
});

When a county is clicked, the queryBlockGroups function executes and its associated data is passed into the function. The function executes a QueryTask to return statistics on the block groups layer. After successfully executing, the function returns string-formatted content for the PopupTemplate per each county feature.

function queryBlockGroups(target) {
  // count of block groups that intersect the county
  var countStatDef = new StatisticDefinition({
    statisticType: "count",
    onStatisticField: "POPDENS_CY",
    outStatisticFieldName: "numBlockGroups"
  });
  ...

  var query = new Query({
    geometry: target.graphic.geometry,
    outFields: ["*"],
    outStatistics: [countStatDef, minStatDef, maxStatDef, avgStatDef],
  });

  // execute the query task
  return queryBlocksTask.execute(query).then(function (result) {
    var stats = result.features[0].attributes;

    // format the query result for the counties popupTemplate's content.
    return "<b>" + stats.numBlockGroups + "</b> block groups intersect boundary of {NAME}. <br><br>"
      + "The population density statistics for the block groups: <br>"
      + "<ul> <li> Minimum: " + Math.round(stats.minPopDensity) + " people/sq mile </li>"
      + "<li> Maximum: " + Math.round(stats.maxPopDensity) + " people/sq mile </li>"
      + "<li> Average: " + Math.round(stats.avgPopDensity) + " people/sq mile </li></ul>";
    });
}

The map shows 2012 population density for the United States. It adds increasing level of detail as you zoom in starting at State and working down to Census block level. Details are provided below.

• State level
• County level
• ZIP Code level
• Census tract level
• Census block level