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 will use a Popup
to display feature attributes in different ways in a pop-up for three different hosted feature layers.
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 with the correct privileges to access the location services used in this tutorial.
- Go to the Create an API key tutorial and create an API key with the following privilege(s):
- 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 access to the layer item. Learn more in Item access privileges.
- Privileges
- In CodePen, set
esri
to your API key..Config.api Key Use dark colors for code blocks esriConfig.apiKey = "YOUR_ACCESS_TOKEN"; const map = new Map({ basemap: "arcgis/topographic" // basemap styles service });
To learn about other ways to get an access token, go to Types of authentication.
Add modules
-
In the
require
statement, add theFeature
module.Layer The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules, but this tutorial is based on AMD. The AMD
require
function uses references to determine which modules will be loaded – for example, you can specify"esri/
for loading the Map module. After the modules are loaded, they are passed as parameters (e.g.Map" Map
) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. To learn more about the API's different modules visit the Overview Guide page.Use dark colors for code blocks require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer" ], function(esriConfig, Map, MapView, FeatureLayer){
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 Popup
class to define the content with attributes for the Trailheads feature layer.
-
Create a
popup
object and set theTrailheads content
property to a custom HTML string that will display information such as trail name and city jurisdiction.Use dark colors for code blocks 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" }
-
Create a
trailheads
Feature
. Set theLayer url
,out
, andFields popup
properties before addingTemplate trailheads
to themap
. TheFeature
will autocast theLayer popup
to create a class instance of the object.Template The
out
property enables access to attribute data on the client-side.Fields Use dark colors for code blocks // 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);
-
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 Popup
class to define a bar chart that shows the minimum and maximum elevation for the Trails feature layer.
-
Create a
popup
object. In theTrails content
property, set thetype
tomedia
that will display acolumn-chart
of minimum and maximum elevations for each trail.Use dark colors for code blocks 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" } }] }] }
-
Create a
trails
Feature
. Set theLayer url
,out
, andFields popup
properties before addingTemplate trails
to themap
. TheFeature
will autocast theLayer popup
to create a class instance of the object.Template Use dark colors for code blocks // 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);
-
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 Popup
and field
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 field
is the ability to format field values in different ways, for example, to show currency or the number of decimal places.
-
Create a
popup
object. In theOpenspaces content
property, settype
tofields
and define thefield
array.Infos Use dark colors for code blocks 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" } ] }] }
-
Create an
openspaces
Feature
. Set theLayer url
,out
, andFields popup
properties before addingTemplate openspaces
to themap
. TheFeature
will autocast theLayer popup
to create a class instance of the object.Template Use dark colors for code blocks "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);
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: