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.
In the require statement, add the FeatureLayer module.
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/Map" for loading the Map module. After the modules are loaded, they are passed as parameters (e.g. 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. For more information on the different types of modules, visit the Introduction to Tooling guide topic.
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 popupTrailheads and set the content property to a custom HTML string that will display information such as trail name and city jurisdiction.
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 the content property, set the type to media that will display a column-chart of minimum and maximum elevations for each trail.
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 the content property, set type to fields and define the fieldInfos array.
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.