Display a pop-up

Learn how to format a pop-up to show attributes in a feature layer.

A feature layer is a dataset in a hosted feature service. Each feature layer contains features with a single geometry type and a set of attributes. You can display attributes when users click on a feature by using a pop-up. 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 use a PopupTemplate to display feature attributes in different ways in a pop-up for three different hosted feature layers.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a new pen

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

Set the API key

To access ArcGIS services, you need an API key.

  1. Go to your dashboard to get an API key.

  2. In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

    Change line
        
    1
    2
    3
    4
    esriConfig.apiKey = "YOUR_API_KEY";
    const map = new Map({
      basemap: "arcgis-topographic" // Basemap layer service
    });
    

Add modules

  1. In the require statement, add the FeatureLayer module.

    The ArcGIS API for JavaScript uses AMD modules. The require function is used to load modules so they can be used in the main function. It's important to keep the module references and function parameters in the same order.

    Add line.Add line.Change line
                                                                                                                                                           
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    <html>
    <head>
      <meta name="description" content="DevLab: Configure a popup">
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Display a pop-up (JSAPI)</title>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.20/"></script>
    </head>
    
     <script>
      require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
    
          "esri/layers/FeatureLayer"
        ],
    
        function(esriConfig,Map, MapView, FeatureLayer){
         esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.02700], //Longitude, latitude
            zoom: 13
          // 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
          // Define a popup for Trails
          const popupTrails = {
            title: "Trail Information",
            content: [{
             type: "media",
              mediaInfos: [{
                type: "column-chart",
                caption: "",
                value: {
                  fields: [ "ELEV_MIN","ELEV_MAX" ],
                  normalizeField: null,
                  tooltipField: "Min and max elevation values"
          const 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);
          // Define popup for Parks and Open Spaces
          const 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"
          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
          map.add(openspaces,0);
      </script>
    
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>

Display attributes

The easiest way to display feature attributes is to reference the field names in the title or content area of a pop-up. Use a PopupTemplate class to define the content with attributes for the Trailheads feature layer.

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

    Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                           
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    <html>
    <head>
      <meta name="description" content="DevLab: Configure a popup">
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Display a pop-up (JSAPI)</title>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.20/"></script>
    </head>
    
     <script>
      require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer"
        function(esriConfig,Map, MapView, FeatureLayer){
         esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.02700], //Longitude, latitude
            zoom: 13
          });
    
          // 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
          // Define a popup for Trails
          const popupTrails = {
            title: "Trail Information",
            content: [{
             type: "media",
              mediaInfos: [{
                type: "column-chart",
                caption: "",
                value: {
                  fields: [ "ELEV_MIN","ELEV_MAX" ],
                  normalizeField: null,
                  tooltipField: "Min and max elevation values"
          const 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);
          // Define popup for Parks and Open Spaces
          const 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"
          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
          map.add(openspaces,0);
      </script>
    
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  2. Create a trailheads FeatureLayer. Set the url, outFields, and popupTemplate properties before adding trailheads to the map. The FeatureLayer will autocast the popupTemplate to create a class instance of the object.

    The outFields property enables access to attribute data on the client-side.

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                           
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    <html>
    <head>
      <meta name="description" content="DevLab: Configure a popup">
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Display a pop-up (JSAPI)</title>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.20/"></script>
    </head>
    
     <script>
      require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer"
        function(esriConfig,Map, MapView, FeatureLayer){
         esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.02700], //Longitude, latitude
            zoom: 13
          // 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
          });
    
          map.add(trailheads);
          // Define a popup for Trails
          const popupTrails = {
            title: "Trail Information",
            content: [{
             type: "media",
              mediaInfos: [{
                type: "column-chart",
                caption: "",
                value: {
                  fields: [ "ELEV_MIN","ELEV_MAX" ],
                  normalizeField: null,
                  tooltipField: "Min and max elevation values"
          const 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);
          // Define popup for Parks and Open Spaces
          const 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"
          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
          map.add(openspaces,0);
      </script>
    
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  3. 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.

  1. Create a popupTrails. In the content property, set the type to media that will display a column-chart of minimum and maximum elevations for each trail.

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                           
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    <html>
    <head>
      <meta name="description" content="DevLab: Configure a popup">
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Display a pop-up (JSAPI)</title>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.20/"></script>
    </head>
    
     <script>
      require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer"
        function(esriConfig,Map, MapView, FeatureLayer){
         esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.02700], //Longitude, latitude
            zoom: 13
          // 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
          map.add(trailheads);
    
          // Define a popup for Trails
          const popupTrails = {
            title: "Trail Information",
            content: [{
             type: "media",
              mediaInfos: [{
                type: "column-chart",
                caption: "",
                value: {
                  fields: [ "ELEV_MIN","ELEV_MAX" ],
                  normalizeField: null,
                  tooltipField: "Min and max elevation values"
                  }
                }]
            }]
          }
          const 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);
          // Define popup for Parks and Open Spaces
          const 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"
          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
          map.add(openspaces,0);
      </script>
    
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  2. Create a trails FeatureLayer. Set the url, outFields, and popupTemplate properties before adding trails to the map. The FeatureLayer will autocast the popupTemplate to create a class instance of the object.

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                           
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    <html>
    <head>
      <meta name="description" content="DevLab: Configure a popup">
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Display a pop-up (JSAPI)</title>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.20/"></script>
    </head>
    
     <script>
      require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer"
        function(esriConfig,Map, MapView, FeatureLayer){
         esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.02700], //Longitude, latitude
            zoom: 13
          // 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
          // Define a popup for Trails
          const popupTrails = {
            title: "Trail Information",
            content: [{
             type: "media",
              mediaInfos: [{
                type: "column-chart",
                caption: "",
                value: {
                  fields: [ "ELEV_MIN","ELEV_MAX" ],
                  normalizeField: null,
                  tooltipField: "Min and max elevation values"
                  }
                }]
            }]
          }
    
          const 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);
          // Define popup for Parks and Open Spaces
          const 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"
          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
          map.add(openspaces,0);
      </script>
    
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  3. Click on the trails to view a pop-up that contains a bar chart with elevation data.

Display a table

Feature attributes 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. 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.

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

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                           
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    <html>
    <head>
      <meta name="description" content="DevLab: Configure a popup">
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Display a pop-up (JSAPI)</title>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.20/"></script>
    </head>
    
     <script>
      require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer"
        function(esriConfig,Map, MapView, FeatureLayer){
         esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.02700], //Longitude, latitude
            zoom: 13
          // 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
          // Define a popup for Trails
          const popupTrails = {
            title: "Trail Information",
            content: [{
             type: "media",
              mediaInfos: [{
                type: "column-chart",
                caption: "",
                value: {
                  fields: [ "ELEV_MIN","ELEV_MAX" ],
                  normalizeField: null,
                  tooltipField: "Min and max elevation values"
          const 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);
    
          // Define popup for Parks and Open Spaces
          const 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"
                }
              ]
            }]
          }
          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
          map.add(openspaces,0);
      </script>
    
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>
  2. Create an openspaces FeatureLayer. Set the url, outFields, and popupTemplate properties before adding openspaces to the map. The FeatureLayer will autocast the popupTemplate to create a class instance of the object.

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                           
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    <html>
    <head>
      <meta name="description" content="DevLab: Configure a popup">
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
      <title>ArcGIS API for JavaScript Tutorials: Display a pop-up (JSAPI)</title>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      </style>
      <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.20/"></script>
    </head>
    
     <script>
      require([
          "esri/config",
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer"
        function(esriConfig,Map, MapView, FeatureLayer){
         esriConfig.apiKey = "YOUR_API_KEY";
          const map = new Map({
            basemap: "arcgis-topographic" //Basemap layer service
          const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80543,34.02700], //Longitude, latitude
            zoom: 13
          // 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
          // Define a popup for Trails
          const popupTrails = {
            title: "Trail Information",
            content: [{
             type: "media",
              mediaInfos: [{
                type: "column-chart",
                caption: "",
                value: {
                  fields: [ "ELEV_MIN","ELEV_MAX" ],
                  normalizeField: null,
                  tooltipField: "Min and max elevation values"
          const 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);
          // Define popup for Parks and Open Spaces
          const 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"
                }
              ]
            }]
          }
    
          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
          });
    
          map.add(openspaces,0);
      </script>
    
    </head>
    <body>
      <div id="viewDiv"></div>
    </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 in a unique way.

What's next?

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

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.