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
1
2
3
4
5
6
7
8
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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.