PopupTemplate with promise

Explore in the sandboxView live

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 query executes successfully.

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

Use dark colors for code blocksCopy
const countiesLayer = new FeatureLayer({
  ...
  // create a new popupTemplate for the layer
  popupTemplate: {
    title: "County of {NAME}",
    content: queryChargingStations
  }
});

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

Use dark colors for code blocksCopy
function queryChargingStations(target) {
  // count and types of electric charging stations that intersect the county
  const countLevel1 = new StatisticDefinition({
    statisticType: "count",
    onStatisticField: "EV_Level1_EVSE_Num",
    outStatisticFieldName: "numLevel_1"
  });
  ...

  const queryObject = new Query({
    geometry: target.graphic.geometry,
    outFields: ["*"],
    spatialRelationship: "intersects",
    outStatistics: [countLevel1, countLevel2, countLevel3]
  });
  ...

  // execute the query
  return query.executeQueryJSON(queryUrl, queryObject).then((result) => {
    const stats = result.features[0].attributes;

    // format the query result for the counties popupTemplate's content.
    return "<b>" + (stats.numLevel_1 + stats.numLevel_2 + stats.numLevel_3) +
      "</b> electric charging stations intersect the boundary of {NAME}. <br><br>" +
      "The number and type of stations: <br>" +
      "<ul>" +
      "<li> Level 1 Charging Stations (120V, AC): " + (stats.numLevel_1) + "</li>" +
      "<li> Level 2 Charging Stations (240V, AC): " + (stats.numLevel_2) + "</li>" +
      "<li> Level 3 Charging Stations (480V, DC): " + (stats.numLevel_3) + "</li>" +
      "</ul>";
    });
}

The map shows electric charging station density by county for the United States. The counties have been generalized, so some distortion may be noticeable at large scales. Counts of 3 different types of electric charging stations are displayed for each county, returned in the popup.

MapView

Popup