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 lab 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 DevLabs: 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",
      "dojo/domReady!"
      //*** ADD ***//
    ], function(Map, MapView, FeatureLayer) {
    
  2. In the 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 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 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"
      }
    }]
  }