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 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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.