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 use URLs to access and display three different hosted feature layers:

• Trailheads (points)
• Trails (lines)
• Parks and Open Spaces (polygons)

Prerequisites

Steps

Create a new pen

1. To get started, either complete the Display a map tutorial or use this pen.

Set the API key

To access ArcGIS services, you need an API key.

1. Go to your dashboard to get an API key.

2. In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

   Use dark colors for code blocks

       

   Change line

   1
   2
   3
   4
   esriConfig.apiKey = "YOUR_API_KEY";
   const map = new Map({
     basemap: "arcgis-topographic" // Basemap layer service
   });

Add modules

1. In the require statement, add the FeatureLayer module.

   More info

   The ArcGIS API 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.

   Expand

   Use dark colors for code blocks

                                                                       

   Add line.Change line

   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
     <script>
     require([
       "esri/config",
       "esri/Map",
       "esri/views/MapView",
   
       "esri/layers/FeatureLayer"
   
     ], function(esriConfig,Map, MapView, FeatureLayer) {
   
     });
   </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.

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

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

   Expand

   Use dark colors for code blocks

                                                                       

   Add line.Add line.Add line.Add line.

   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
     const view = new MapView({
       container: "viewDiv",
       map: map,
       center: [-118.80543,34.02700],
       zoom: 13
     });
   
   //Trailheads feature layer (points)
     const trailheadsLayer = new FeatureLayer({
       url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
     });
   

   Expand

3. Add trailheadsLayer to the map.

   Expand

   Use dark colors for code blocks

                                                                       

   Add line.

   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
   //Trailheads feature layer (points)
     const trailheadsLayer = new FeatureLayer({
       url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
     });
   
     map.add(trailheadsLayer);
   

   Expand

4. 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.

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

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

   Expand

   Use dark colors for code blocks

                                                                       

   Add line.Add line.Add line.Add line.

   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
     map.add(trailheadsLayer);
   
   //Trails feature layer (lines)
     const trailsLayer = new FeatureLayer({
       url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
     });
   

   Expand

3. 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

                                                                       

   Add line.

   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
   //Trails feature layer (lines)
     const trailsLayer = new FeatureLayer({
       url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
     });
   
     map.add(trailsLayer, 0);
   

   Expand

4. 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.

1. 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.

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

   Expand

   Use dark colors for code blocks

                                                                       

   Add line.Add line.Add line.Add line.

   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
     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

3. 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

                                                                       

   Add line.

   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
   // Parks and open spaces (polygons)
     const parksLayer = new FeatureLayer({
       url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
     });
   
     map.add(parksLayer, 0);
   

   Expand

Run the app

In CodePen, run your code to display the map.

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

1. Topographic basemap layer
2. Parks and Open Spaces (polygons)
3. Trails (lines)
4. 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:

• Import data as a feature layer
• Create a new feature layer
• Display a pop-up
• Style a feature layer
• Query a feature layer (SQL)