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
- To get started, either complete the Display a map tutorial or .
Set the API key
To access ArcGIS services, you need an API key.
Go to your dashboard to get an API key.
In CodePen, set the
apiKeyto your key, so it can be used to access basemap layer and location services.Use dark colors for code blocks Change line 1 2 3 4esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-topographic" // Basemap layer service });
Add modules
In the
requirestatement, add theFeatureLayermodule.The ArcGIS API for JavaScript uses AMD modules. The
requirefunction is used to load modules so they can be used in the mainfunction. It's important to keep the module references and function parameters in the same order.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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>
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.
Create a
popupTrailheadsand set thecontentproperty to a custom HTML string that will display information such as trail name and city jurisdiction.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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>Create a
trailheadsFeatureLayer. Set theurl,outFields, andpopupTemplateproperties before addingtrailheadsto themap. TheFeatureLayerwill autocast thepopupTemplateto create a class instance of the object.The
outFieldsproperty enables access to attribute data on the client-side.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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>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.
Create a
popupTrails. In thecontentproperty, set thetypetomediathat will display acolumn-chartof minimum and maximum elevations for each trail.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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>Create a
trailsFeatureLayer. Set theurl,outFields, andpopupTemplateproperties before addingtrailsto themap. TheFeatureLayerwill autocast thepopupTemplateto create a class instance of the object.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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>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.
Create a
popupOpenspaces. In thecontentproperty, settypetofieldsand define thefieldInfosarray.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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>Create an
openspacesFeatureLayer. Set theurl,outFields, andpopupTemplateproperties before addingopenspacesto themap. TheFeatureLayerwill autocast thepopupTemplateto create a class instance of the object.Use dark colors for code blocks 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.23/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.23/"></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>
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:
Solution
Estimated time
15 minutes