Configure pop-ups

Overview

You will learn: how to build an app to style and format the content in pop-ups for feature layers.

Applications can show pop-ups with attribute information for feature layers and graphics when you click on the map. Pop-ups can be formatted and styled by creating a PopupTemplate object. A PopupTemplate allows you to define the title, content and how the media is displayed. You can pass in HTML, a function or a list of fields to display a table view. Arcade Expressions can also be used to perform calculations and format the data before it is displayed. If you have graphics or a graphics layer, individual pop-ups can be defined for each graphic. Learn more about creating and formatting pop-ups in the documentation.

In this tutorial, you will create and apply a pop-up template for the Trailheads, Trails, and Parks and Open Spaces layers.

Click on the map below to see the different pop-ups for each layer.

Steps

Create a starter app

1. Open the JavaScript Starter App on CodePen.

2. In CodePen, click Fork and save the pen as ArcGIS API for JavaScript Tutorials: Configure pop-ups.

Define a pop-up for the Trailheads layer using HTML

1. In the require statement, add a reference to the FeatureLayer module.

       require([
         "esri/Map",
         "esri/views/MapView",
         "esri/layers/FeatureLayer"
       ], function(Map, MapView, FeatureLayer) {
   

2. At the end of the code in the main function, create a popupTemplate that sets the title to Trailhead and the content to a custom HTML string. Apply the popupTemplate to the layer and add the layer to the map.

   var popupTrailheads = {
     title: "{TRL_NAME}",
     content:
       "<b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft"
   };
   
   var trailheads = new FeatureLayer({
     url:
       "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0",
     outFields: ["TRL_NAME", "CITY_JUR", "X_STREET", "PARKING", "ELEV_FT"],
     popupTemplate: popupTrailheads
   });
   
   map.add(trailheads);
   

   
   NOTE: The feature layer will autocast the popupTemplate and create a class instance from the object. Learn more about autocasting in the documentation.

3. Run the code and click on the trailheads to view the pop-up.

Define a pop-up for the Trails layer using a function

1. In the main function, create a popupTemplate that sets the title to Trail Information and uses a function to render the content. Apply the popupTemplate to the layer and add the layer to the map.

   var popupTrails = {
     title: "Trail Information",
     content: function () {
       return "This is {TRL_NAME} with {ELEV_GAIN} ft of climbing.";
     }
   };
   
   var trails = new FeatureLayer({
     url:
       "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0",
     outFields: ["TRL_NAME", "ELEV_GAIN"],
     popupTemplate: popupTrails
   });
   
   map.add(trails, 0);
   

   
   NOTE: The feature layer will autocast the popupTemplate and create a class instance from the object. Learn more about autocasting in the documentation.

2. Run the code and click on Trails to view the pop-up.

Define a pop-up for the Parks and Open Spaces layer to show a table

1. In the main function, create a popupTemplate that sets the title to {PARK_NAME} and defines an array of fieldsInfos to be displayed in the content. This will create a table view with the field name on the left and the field value on the right. Apply the popupTemplate to the layer and add the layer to the map.

   var popupOpenspaces = {
     title: "{PARK_NAME}",
     content: [
       {
         type: "fields",
         fieldInfos: [
           {
             fieldName: "AGNCY_NAME",
             label: "Agency",
             isEditable: true,
             tooltip: "",
             visible: true,
             format: null,
             stringFieldOption: "text-box"
           },
           {
             fieldName: "TYPE",
             label: "Type",
             isEditable: true,
             tooltip: "",
             visible: true,
             format: null,
             stringFieldOption: "text-box"
           },
           {
             fieldName: "ACCESS_TYP",
             label: "Access",
             isEditable: true,
             tooltip: "",
             visible: true,
             format: null,
             stringFieldOption: "text-box"
           },
           {
             fieldName: "GIS_ACRES",
             label: "Acres",
             isEditable: true,
             tooltip: "",
             visible: true,
             format: {
               places: 2,
               digitSeparator: true
             },
             stringFieldOption: "text-box"
           }
         ]
       }
     ]
   };
   
   var openspaces = new FeatureLayer({
     url:
       "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0",
     outFields: ["TYPE", "PARK_NAME", "AGNCY_NAME", "ACCESS_TYP", "GIS_ACRES"],
     popupTemplate: popupOpenspaces
   });
   
   map.add(openspaces, 0);
   

   
   NOTE: The feature layer will autocast the popupTemplate and create a class instance from the object. Learn more about autocasting in the documentation.

2. Run the code and click on Parks and Open Spaces to view the pop-up. Notice how it creates a table view of the fields and values specified.

Congratulations, you're done!

Your app should look something like this.

Challenge

Add a chart

var popupTrails = {
  title: "Trail Information",
  //*** ADD ***//
  // content: function(){
  //    return "This is {TRL_NAME} with {ELEV_GAIN} ft of climbing.";
  // }
  content: [
    {
      type: "media",
      mediaInfos: [
        {
          type: "column-chart",
          caption: "",
          value: {
            fields: ["ELEV_MIN", "ELEV_MAX"],
            normalizeField: null,
            tooltipField: "Min and max elevation values"
          }
        }
      ]
    }
  ]
};

Add an Arcade expression

var popupTrails = {
  title: "Trail Information",
  //*** ADD ***//
  // content: function(){
  //    return "This is {TRL_NAME} with {ELEV_GAIN} ft of climbing.";
  // }, {
  expressionInfos: [
    {
      name: "elevation-ratio",
      title: "Elevation change",
      expression: "Round((($feature.ELEV_MAX - $feature.ELEV_MIN)/($feature.LENGTH_MI)/5280)*100,2)"
    }
  ],
  content:
    "The {TRL_NAME} trail average slope per mile is: {expression/elevation-ratio}% over a total of {LENGTH_MI} miles."
};