Skip to content

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.

// Find the counties layer in the map and set the popup template.
const countiesLayer = viewElement.map.layers.find((layer) => {
return layer.title === "USA Counties Generalized Boundaries";
});
countiesLayer.outFields = ["*"];
countiesLayer.popupTemplate = {
title: "{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.

function queryChargingStations(target) {
// Count and types of electric charging stations that intersect the county.
const countLevel1 = new StatisticDefinition({
statisticType: "count",
onStatisticField: "EV_Level1_EVSE_Ports",
outStatisticFieldName: "numLevel_1",
});
const countLevel2 = new StatisticDefinition({
statisticType: "count",
onStatisticField: "EV_Level2_EVSE_Ports",
outStatisticFieldName: "numLevel_2",
});
const countLevel3 = new StatisticDefinition({
statisticType: "count",
onStatisticField: "EV_DC_Fast_Ports",
outStatisticFieldName: "numLevel_3",
});
// Create a query object with the target graphic's geometry and the outStatistics.
const queryObject = new Query({
geometry: target.graphic.geometry,
outFields: ["*"],
spatialRelationship: "intersects",
outStatistics: [countLevel1, countLevel2, countLevel3],
});
// Execute the query with the query object.
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> level 1, 2, and 3 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 displays the population in 2020 of each county in 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 in the popup.