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

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

        
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 QueryTask to return statistics on the county layer. After successfully executing, the function returns string-formatted content for the PopupTemplate per each county feature.

                                
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 query = new Query({
    geometry: target.graphic.geometry,
    outFields: ["*"],
    spatialRelationship: "intersects",
    outStatistics: [countLevel1, countLevel2, countLevel3]
  });
  ...

  // execute the query task
  return queryChargingStationsTask.execute(query).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.