Display a pop-up | ArcGIS Maps SDK for JavaScript

Learn how to format a pop-up to show attributes Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more in a feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more .

A feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more is a dataset in a hosted feature service A feature service is a data service that provides access to spatial and non-spatial data in feature layers, feature layer views, and tables. Learn more . Each feature layer contains features A feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes. Learn more with a single geometry A geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference. Learn more type and a set of attributes Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more . You can display attributes when users click on a feature by using a pop-up A pop-up is a visual element used to display data for features or graphics in a map. Learn more . Pop-ups can be configured to display raw attribute values, calculated values, or content in different ways including with charts or media.

In this tutorial, you will use a PopupTemplate to display feature attributes in different ways in a pop-up for three different hosted feature layers A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more .

Prerequisites

Steps

Create a new pen

To get started, either complete the Display a map tutorial or .

Get an access token

You need an access token An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with the correct privileges to access the location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial.

Go to the Create an API key tutorial and create an API key An API key is a long-lived access token created using API key credentials. They are valid for up to one year and are typically embedded directly into client applications. Learn more with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :
- Privileges
  - Location services > Basemaps
- Item access
  - Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials API key credentials are an item that contains the parameters used to create and manage long-lived access tokens for API key authentication. They are a type of developer credential. Learn more access to the layer item. Learn more in Item access privileges.
In CodePen, set the apiKey property on the global esriConfig variable to your access token.
var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN", };

To learn about other ways to get an access token, go to Types of authentication.

Add modules

In a new <script> at the bottom of the <body>, use $arcgis.import() to add the FeatureLayer module.

The ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for JavaScript, previously known as ArcGIS API for JavaScript, is a developer product for building mapping and spatial analysis applications for the web. Learn more is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK’s different modules, visit the References page.

24 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a pop-up</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");



  </script>
4 collapsed lines

</body>

</html>

Display attributes

The easiest way to display feature attributes Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more is to reference the field names in the title or content area of a pop-up A pop-up is a visual element used to display data for features or graphics in a map. Learn more . Use a PopupTemplate class to define the content with attributes for the Trailheads feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more .

Before you can progress further, you’ll need to wait for the viewOnReady method to resolve to ensure the Map component is loaded and ready to use.

32 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a pop-up</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();


  </script>
4 collapsed lines

</body>

</html>

Create a popupTrailheads object and set the content property to a custom HTML string that will display information such as trail name and city jurisdiction.

32 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a pop-up</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();


    // Define a pop-up for Trailheads
    const 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",
    };

  </script>
4 collapsed lines

</body>

</html>

Create a trailheads FeatureLayer. Set the url, outFields, and popupTemplate properties before adding trailheads to the map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more . The FeatureLayer will autocast the popupTemplate to create a class instance of the object.

The outFields property enables access to attribute Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more data on the client-side.

40 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a pop-up</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();


    // Define a pop-up for Trailheads
    const 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",
    };

    const 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,
    });

    viewElement.map.add(trailheads);
6 collapsed lines

  </script>

</body>

</html>

Click on the hiker icons to display the pop-up.

Display a chart

You can display different types of charts, also known as media content, in pop-ups. Charts are created by defining the type and fields (attributes) values. Use the PopupTemplate class to define a bar chart that shows the minimum and maximum elevation for the Trails feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more .

Create a popupTrails object. In the content property, set the type to media that will display a column-chart of minimum and maximum elevations for each trail. Define the fieldInfos array at the popup template level to format the field names and values to display in the chart.

53 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a pop-up</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();


    // Define a pop-up for Trailheads
    const 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",
    };

    const 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,
    });

    viewElement.map.add(trailheads);

    // Define a popup for Trails
    const popupTrails = {
      title: "Trail Information",
      content: [
        {
          type: "media",
          mediaInfos: [
            {
              type: "column-chart",
              title: "Trail Elevation",
              value: {
                fields: ["ELEV_MIN", "ELEV_MAX"],
                normalizeField: null,
                tooltipField: "Min and max elevation values",
              },
            },
          ],
        },
      ],
      fieldInfos: [
        {
          fieldName: "ELEV_MIN",
          label: "Elevation Minimum",
          format: {
            digitSeparator: true,
          },
        },
        {
          fieldName: "ELEV_MAX",
          label: "Elevation Maximum",
          format: {
            digitSeparator: true,
          },
        },
      ],
    };
6 collapsed lines

  </script>

</body>

</html>

Create a trails FeatureLayer. Set the url, outFields, and popupTemplate properties before adding trails to the map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more . The FeatureLayer will autocast the popupTemplate to create a class instance of the object.

55 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a pop-up</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();


    // Define a pop-up for Trailheads
    const 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",
    };

    const 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,
    });

    viewElement.map.add(trailheads);

    // Define a popup for Trails
    const popupTrails = {
      title: "Trail Information",
      content: [
        {
          type: "media",
          mediaInfos: [
            {
              type: "column-chart",
              title: "Trail Elevation",
              value: {
                fields: ["ELEV_MIN", "ELEV_MAX"],
                normalizeField: null,
                tooltipField: "Min and max elevation values",
              },
            },
          ],
        },
      ],
      fieldInfos: [
        {
          fieldName: "ELEV_MIN",
          label: "Elevation Minimum",
          format: {
            digitSeparator: true,
          },
        },
        {
          fieldName: "ELEV_MAX",
          label: "Elevation Maximum",
          format: {
            digitSeparator: true,
          },
        },
      ],
    };

    const trails = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0",
      outFields: ["TRL_NAME", "ELEV_GAIN"],
      popupTemplate: popupTrails,
    });

    viewElement.map.add(trails, 0);
6 collapsed lines

  </script>

</body>

</html>

Click on the trails to view a pop-up that contains a bar chart with elevation data.

Display a table

Feature attributes Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more can also be displayed in a table. Use the PopupTemplate and fieldInfos classes to display attribute names and values in a table for the Parks and Open Spaces feature layer A feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields. Learn more . One of the advantages of using a table with fieldInfos is the ability to format field values in different ways, for example, to show currency or the number of decimal places.

Create a popupOpenspaces object. In the content property, set type to fields and define the fieldInfos array.

98 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a pop-up</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();


    // Define a pop-up for Trailheads
    const 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",
    };

    const 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,
    });

    viewElement.map.add(trailheads);

    // Define a popup for Trails
    const popupTrails = {
      title: "Trail Information",
      content: [
        {
          type: "media",
          mediaInfos: [
            {
              type: "column-chart",
              title: "Trail Elevation",
              value: {
                fields: ["ELEV_MIN", "ELEV_MAX"],
                normalizeField: null,
                tooltipField: "Min and max elevation values",
              },
            },
          ],
        },
      ],
      fieldInfos: [
        {
          fieldName: "ELEV_MIN",
          label: "Elevation Minimum",
          format: {
            digitSeparator: true,
          },
        },
        {
          fieldName: "ELEV_MAX",
          label: "Elevation Maximum",
          format: {
            digitSeparator: true,
          },
        },
      ],
    };

    const trails = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0",
      outFields: ["TRL_NAME", "ELEV_GAIN"],
      popupTemplate: popupTrails,
    });

    viewElement.map.add(trails, 0);

    // Define popup for Parks and Open Spaces
    const popupOpenspaces = {
      title: "{PARK_NAME}",
      content: [
        {
          type: "fields",
          fieldInfos: [
            {
              fieldName: "AGNCY_NAME",
              label: "Agency",
            },
            {
              fieldName: "TYPE",
              label: "Type",
            },
            {
              fieldName: "ACCESS_TYP",
              label: "Access",
            },

            {
              fieldName: "GIS_ACRES",
              label: "Acres",
              fieldFormat: {
                type: "number",
                usegrouping: "always",
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              },

            },
          ],
        },
      ],
    };
6 collapsed lines

  </script>

</body>

</html>

Create an openspaces FeatureLayer. Set the url, outFields, and popupTemplate properties before adding openspaces to the map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more . The FeatureLayer will autocast the popupTemplate to create a class instance of the object.

130 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a pop-up</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>


<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>


  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();


    // Define a pop-up for Trailheads
    const 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",
    };

    const 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,
    });

    viewElement.map.add(trailheads);

    // Define a popup for Trails
    const popupTrails = {
      title: "Trail Information",
      content: [
        {
          type: "media",
          mediaInfos: [
            {
              type: "column-chart",
              title: "Trail Elevation",
              value: {
                fields: ["ELEV_MIN", "ELEV_MAX"],
                normalizeField: null,
                tooltipField: "Min and max elevation values",
              },
            },
          ],
        },
      ],
      fieldInfos: [
        {
          fieldName: "ELEV_MIN",
          label: "Elevation Minimum",
          format: {
            digitSeparator: true,
          },
        },
        {
          fieldName: "ELEV_MAX",
          label: "Elevation Maximum",
          format: {
            digitSeparator: true,
          },
        },
      ],
    };

    const trails = new FeatureLayer({
      url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0",
      outFields: ["TRL_NAME", "ELEV_GAIN"],
      popupTemplate: popupTrails,
    });

    viewElement.map.add(trails, 0);

    // Define popup for Parks and Open Spaces
    const popupOpenspaces = {
      title: "{PARK_NAME}",
      content: [
        {
          type: "fields",
          fieldInfos: [
            {
              fieldName: "AGNCY_NAME",
              label: "Agency",
            },
            {
              fieldName: "TYPE",
              label: "Type",
            },
            {
              fieldName: "ACCESS_TYP",
              label: "Access",
            },

            {
              fieldName: "GIS_ACRES",
              label: "Acres",
              fieldFormat: {
                type: "number",
                usegrouping: "always",
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              },

            },
          ],
        },
      ],
    };

    const 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",
        "TRLS_MI",
        "TOTAL_GOOD",
        "TOTAL_FAIR",
        "TOTAL_POOR",
      ],
      popupTemplate: popupOpenspaces,
    });

    viewElement.map.add(openspaces, 0);
6 collapsed lines

  </script>

</body>

</html>

Run the App

In CodePen, run your code to display the map.

Click on different park areas to display a pop-up of a table view with the fields and values you specified. You should be able to click all of the features in the map and view a pop-up. Each pop-up will display feature attributes Attributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service. Learn more in a unique way.

What’s next?

Learn how to use additional SDK features and ArcGIS services in these tutorials: