Display a popup
Learn how to display feature attributes in a popup.
A popup, also known as a "popup", is a visual element that displays information about a feature when it is clicked. You typically style and configure a popup using HTML and CSS for each layer in a map. popups can display attribute values, calculated values, or rich content such as images, charts, or videos.
In this tutorial, you create an interactive popup for the Trailheads vector tile layer in the Santa Monica Mountains. When a feature is clicked, a popup is displayed containing the name of the trail and the service that manages it.
Prerequisites
You need an ArcGIS Developer or ArcGIS Online account to access the developer dashboard and create an API key.
Steps
Create a new pen
- To get started, either complete the Display a map tutorial or .
Set the API key
To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.
Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.
In CodePen, update
api
to use your key.Key Use dark colors for code blocks Change line
Add a load handler
You need to wait for the map to be completely loaded before adding any layers
Add an event handler to the map
load
event.Use dark colors for code blocks Add line. Add line. Add line.
Add the trailheads layer
You will use a vector tile source and a circle layer to display the trailheads.
Inside the load handler, add a source called
trailheads
and set theurl
property of the vector tile layer.Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add a
circle
layer calledtrailheads-circle
, which references thetrailheads
source.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 a click handler
To display a popup appear when a trailheads feature is clicked, add a click
event handler. This handler is called with the features under the pointer where you clicked.
Add a handler for the
click
event on theMap
. Pass thetrailheads-circle
id to theon
method so the handler is only called when you click on that layer. Inside, store the first element of thefeatures
property to atrailhead
variable.If there are multiple overlapping features where you click, all of those features will be included in the
features
array. The first element listed will be the topmost feature.See the MapLibre GL JS documentation for more map events you can respond to.
Use dark colors for code blocks Add line. Add line. Add line. Add line.
Create the popup
You create a new Popup
with mapboxgl.Popup
. The default parameters give a simple white bubble which stays open until you click its close button or somewhere on the map.
To add content, you use Popup.set
. Use your trailhead
variable to make the HTML string. It is a GeoJSON object, so the clicked trailhead's attributes are in a properties
object. The name of the trail is stored in TRL_
and the name of the park service is in PARK_
.
Create a new
Popup
.You can pass additional options, to change behavior such as whether there is a close button in the corner. See the MapLibre documentation for more details.
Use dark colors for code blocks Add line. Add line. Use
Popup.set
to set the contents: the name of the trail in anHTML <h3>
tag, then the name of the park service.Use dark colors for code blocks Add line.
Add the popup to the map
When you create the Popup
, it is not immediately added to the map. You need to call set
to provide the position, then add
to attach it to the Map
.
Set the location of the
Popup
to the location of the feature clicked on by using theset
method, then add it to the map.L n g Lat Use dark colors for code blocks Add line. Add line.
Change the cursor on hover
To indicate that you can interact with a layer by clicking, it is useful to change the mouse cursor to a pointing hand when hovering over the layer. You use Map.get
to access the map's <canvas>
element, so you can set the CSS cursor
property.
Add a handler to the
mouseenter
event, changing the cursor to a pointer.Use dark colors for code blocks Add line. Add line. Add line. Add a handler to the
mouseleave
event, changing the cursor back to the default.Use dark colors for code blocks Add line. Add line. Add line.
Run the app
In CodePen, run your code to display the map.
The map view should display the Trailheads feature layer. When you hover over a feature the cursor should change. When you click a feature, the name of the trailhead and its park name is displayed in a popup.
What's next?
Learn how to use additional ArcGIS location services in these tutorials:

Query a feature layer (spatial)
Execute a spatial query to access polygon features from a feature service.

Get global data
Query demographic information for locations around the world with the GeoEnrichment service.

Get local data
Query regional facts, spending trends, and psychographics with the GeoEnrichment service.

Add a feature layer
Add features from feature layers to a map.