Overview

You will learn: how to format and style the pop-up content 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 JSBin and create a new bin.

  2. Add the following code to create a basic starter app.

    <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>DevLabs - Query a layer and add graphics</title>
        <style>
          html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
          }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
        <script src="https://js.arcgis.com/4.6/"></script>
        <script>
          require([
              "esri/Map",
              "esri/views/MapView",
              "dojo/domReady!"
            ], function(Map, MapView) {
    
            var map = new Map({
              basemap: "topo-vector"
            });
    
            var view = new MapView({
              container: "viewDiv",
              map: map
            });
    
          });
        </script>
      </head>
      <body>
        <div id="viewDiv"></div>
      </body>
    </html>
    

Define a popup for the Trailheads layer

  1. In the JS code, add code to format the pop-up with a custom HTML string.

    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
    ], function(Map, MapView, FeatureLayer) {
    
      var map = new Map({
        basemap: "topo-vector"
      });
    
      var view = new MapView({
        container: "viewDiv",
        map: 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);
    
    });
    
  2. Run the code. Click on Trailheads to view the styled pop-up.

Define a pop-up for the Trails layer

  1. In the JS code, add code to style the pop-up with a function.

    ...
    
      //*** 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. Click on Trails to view the styled pop-up.

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

  1. In the JS code, add code to style the pop-up with a table of fields and values.

    ...
    
      //*** 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. Click on Parks and Open Spaces to view the styled 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"
      }
    }]
  }