Add a feature layer

Learn how to access and display point, line, and polygon features in feature layers.

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 use feature layers to store, access, and manage large amounts of geographic data for your applications. You get features from a feature layer by accessing its URL.

In this tutorial, you will use URLs to access and display 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.

In CodePen, set esriConfig.apiKey to your access token.

Use dark colors for code blocks
  var esriConfig = {
    apiKey: "YOUR_ACCESS_TOKEN",
  };

To learn about other ways to get an access token, go to Types of authentication.

Add modules

In a new <script> at the bottom of the <body>, use $arcgis.import to add the FeatureLayer module.

The ArcGIS Maps SDK for JavaScript is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK's different modules, visit the References page.
Expand
Use dark colors for code blocks
```
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
    <script type="module">
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


    </script>
```
Expand

Add a point feature layer

Point features are typically displayed in a feature layer on top of all other layers. Use the FeatureLayer class to reference the Trailheads URL and add features to the map.

Go to the Trailheads URL and browse the properties of the layer. Make note of the Name, Type, Drawing Info, and Fields properties.

In CodePen, create a FeatureLayer and set the url property. When using the arcgis-map component, you need to add an event listener for arcgisViewReadyChange to wait until the component is ready before adding the layer.

Expand
Use dark colors for code blocks
    <script type="module">
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


      const viewElement = document.querySelector("arcgis-map");
      viewElement.addEventListener("arcgisViewReadyChange", () => {

        // Trailheads feature layer (points)
        const trailheadsLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        });

      });

    </script>
Expand

Add trailheadsLayer to the map.

Expand
Use dark colors for code blocks
        // Trailheads feature layer (points)
        const trailheadsLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
        });

        viewElement.map.add(trailheadsLayer);
Expand

Run the app to view the Trailheads layer in the map.

Add a line feature layer

Line features are typically displayed in a feature layer before points. Use the FeatureLayer class to reference the Trails URL and add features to the map.

Go to the Trails URL and browse the properties of the layer. Make note of the Name, Type, Drawing Info, and Fields properties.

In CodePen, create a FeatureLayer and set the url property.

Expand
Use dark colors for code blocks
        viewElement.map.add(trailheadsLayer);

        // Trails feature layer (lines)
        const trailsLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        });
Expand

Add trailsLayer to the map with an index of 0. This ensures that the layer is added to the top of the array and is drawn before trailheadsLayer.

Expand
Use dark colors for code blocks
        // Trails feature layer (lines)
        const trailsLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        });

        viewElement.map.add(trailsLayer, 0);
Expand

Run the app to view the Trails layer in the map.

Add a polygon feature layer

Polygon features are typically displayed in a feature layer before lines. Use the FeatureLayer class to reference the Parks and Open Spaces URL and add features to the map.

Go to the Parks and Open Spaces URL and browse the properties of the layer. Make note of the Name, Type, Drawing Info, and Fields properties.

In CodePen, create a FeatureLayer and set the url property.

Expand
Use dark colors for code blocks
        viewElement.map.add(trailsLayer, 0);

        // Parks and open spaces (polygons)
        const parksLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        });
Expand

Add parksLayer to the map with an index of 0. This ensures that the layer is added to the top of the array and is drawn before trailsLayer.

Expand
Use dark colors for code blocks
        // Parks and open spaces (polygons)
        const parksLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0",
        });

        viewElement.map.add(parksLayer, 0);
Expand

Run the app

In CodePen, run your code to display the map.

The map should display all three feature layers in the map in following order:

Topographic basemap layer
Parks and Open Spaces (polygons)
Trails (lines)
Trailheads (points)

It is important to add feature layers in the correct order so that features are displayed correctly (not overlapping) and so you can interact with the features.

What's next?

Learn how to use additional API features and ArcGIS services in these tutorials: