Add a feature layer as GeoJSON
Learn how to add features as GeoJSON to a map.
A feature layer is a dataset in a hosted feature service. Each feature layer contains features with a single geometry type (point, line, or polygon), and a set of attributes. You can access and display features by making query requests to the feature service and displaying them in a map.
In this tutorial, you access the Trailheads feature layer to get GeoJSON and display the features as clusters. Working with GeoJSON is often useful for dynamically generated data, but not suitable for large datasets.
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 event 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 line.
Add a GeoJSON source
To add GeoJSON from a feature service, you need to define a source of type geojson
and reference the feature layer. The source tells MapLibre GL JS how to access the data for the layer, but does not visually add it to the map. To get GeoJSON features from a feature layer, you provide a URL to query the feature service and return features in GeoJSON format. Features can then be displayed by adding the source to a layer.
Inside the load event handler, add a
source
. Set theid
totrailheads
andtype
togeojson
. Setdata
to the URL for thetrailheads
feature layer. Appendquery?f=pgeojson&where=1=1
to the URL to request all of the features as GeoJSON.Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line.
Add a circle layer
A layer in MapLibre GL JS is a visual representation of the data within one source. Use a layer of type circle
to display the trailheads.
Use
add
to add aLayer circle
layer with idtrailheads-circle
. Setsource
totrailheads
to reference the source you just created. Addpaint
properties to make the circles black.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. At the top right, click Run to display the basemap with trailheads as black dots.
Use clusters to display points
One benefit of using GeoJSON to load points in MapLibre GL JS is you can use clustering. This technique replaces a number of overlapping points with a single point that represents the cluster. It simplifies the visual appearance of the map by reducing detail, particularly at lower zoom levels.
To enable clustering, you pass additional parameters when defining the source: cluster
: true
and the optional parameters cluster
and cluster
.
Points that represent clusters have a cluster
property that is set to true
. You can use this in your trailheads-circle
layer to make those points larger, by using a data-driven expression for circle-radius
. You use the case
and get
expressions for this.
They also have a point_
attribute which contains the number of points in the cluster. You can display this as a text label, using a symbol layer.
Add
cluster
,cluster
andRadius cluster
attributes to the definition of theM a x Zoom trailheads
source.Use dark colors for code blocks Add line. Add line. Add line. Make each point larger if it represents a cluster.
Use dark colors for code blocks Add line. Add a symbol layer,
trailheads-cluster-count
. Use the attributepoint_
as the value forcount text-field
.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.
Run the app
In CodePen, run your code to display the map.
The map should display the trailheads as clusters with a number on a large circle. Zoom in to see the clusters split into smaller clusters, and eventually split into single trailhead features.
What's next?
Learn how to use additional ArcGIS location services in these tutorials:

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

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

Style a feature layer
Use data-driven styling to apply symbol colors and styles to feature layers.

Display a pop-up
Display feature attributes in a popup.