You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {i18n.unsupportedBrowser.chrome}
  • Firefox
  • Safari
  • undefined
Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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.

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

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

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

  // execute the query task
  return queryChargingStationsTask.execute(query).then(function(result) {
    var 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.

Sample search results

TitleSample
Loading...