Overview

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

With the ArcGIS API for JavaScript you can configure pop-ups to format and style feature layer data when users click on features. This is accomplished by defining a PopupTemplate and passing it to a feature layer. The PopupTemplate defines the title, content and how the media is displayed. You can pass in HTML, a function or display a table view with fields and values. Expressions can also be used to format and perform calculations on the data before it is displayed.

Learn more about formatting pop-ups in the documentation.

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

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

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

Define a pop-up for the Trailheads layer

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

        require([
          "esri/Map",
          "esri/views/MapView",
          //*** ADD ***//
          "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.

          //*** ADD ***//
          // Define a popup for Trailheads
          var popupTrailheads = {
            "title": "Trailhead",
            "content": "<b>Trail:</b> {TRL_NAME}<br><b>City:</b> {CITY_JUR}<br><b>Cross Street:</b> {X_STREET}<br><b>Parking:</b> {PARKING}<br><b>Elevation:</b> {ELEV_FT} ft"
          }
    
          // Create the layer and set the popup
          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
          });
    
          // Add the layer
          map.add(trailheads);
    
  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.

          //*** ADD ***//
          // Define a popup for Trails
          var popupTrails = {
            "title": "Trail Information",
            "content": function(){
               return "This is {TRL_NAME} with {ELEV_GAIN} ft of climbing.";
            }
          }
    
          // Create the layer and set the renderer
          var trails = new FeatureLayer({
            url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0",
            outFields: ["TRL_NAME","ELEV_GAIN"],
            popupTemplate: popupTrails
          });
    
          // Add the layer
          map.add(trails,0);
    
  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. Apply the popupTemplate to the layer and add the layer to the map.

          //*** ADD ***//
          // Define popup for Parks and Open Spaces
          var popupOpenspaces = {
            "title": "{PARK_NAME}",
            "content": [{
              "type": "fields",
              "fieldInfos": [
                {
                  "fieldName": "AGNCY_NAME",
                  "label": "Agency",
                  "isEditable": true,
                  "tooltip": "",
                  "visible": true,
                  "format": null,
                  "stringFieldOption": "textbox"
                },
                {
                  "fieldName": "TYPE",
                  "label": "Type",
                  "isEditable": true,
                  "tooltip": "",
                  "visible": true,
                  "format": null,
                  "stringFieldOption": "textbox"
                },
                {
                  "fieldName": "ACCESS_TYP",
                  "label": "Access",
                  "isEditable": true,
                  "tooltip": "",
                  "visible": true,
                  "format": null,
                  "stringFieldOption": "textbox"
                },
                {
                  "fieldName": "GIS_ACRES",
                  "label": "Acres",
                  "isEditable": true,
                  "tooltip": "",
                  "visible": true,
                  "format": {
                    "places": 2,
                    "digitSeparator": true
                  },
                  "stringFieldOption": "textbox"
                }
              ]
            }]
          }
    
          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
          });
    
          // Add the layer
          map.add(openspaces,0);
    
  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 media content

Pop-ups can support more than one content type. Try adding a pie chart to display the number of TOTAL_GOOD and TOTAL_POOR ratings for each park:

...
  {
    type: "media",
    mediaInfos: [{
      title: "<b>Park Rating</b>",
      type: "pie-chart",
      caption: "",
      value: {
        theme: "Grasshopper",
        fields: [ "TOTAL_GOOD","TOTAL_POOR" ],
        normalizeField: null,
        tooltipField: "Rating"
      }
    }]
  }