Add a feature layer

Learn how to add features from feature layers 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 and display three different hosted feature layers.

The feature layers are:

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

1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

2. In CodePen, update apiKey to use your key.

   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
         const map = L.map("map", {
           minZoom: 2
         })
   
         map.setView([34.02, -118.805], 13);
   
         const apiKey = "YOUR_API_KEY";
   
         const basemapEnum = "arcgis/streets";
   
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           apiKey: apiKey
         }).addTo(map);
   

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

   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
   73
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           apiKey: apiKey
         }).addTo(map);
   
   
         var trailheads = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
           });
   
   

   Expand

3. Add the trailheads layer to the map.

   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
   73
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           apiKey: apiKey
         }).addTo(map);
   
   
         var trailheads = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
           });
   
         trailheads.addTo(map);
   

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

   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
   73
         var trailheads = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
           });
   
         trailheads.addTo(map);
   
         var trails = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0"
           });
   
   

   Expand

3. Add the trails layer to the map.

   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
   73
         var trailheads = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
           });
   
         trailheads.addTo(map);
   
         var trails = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0"
           });
   
         trails.addTo(map);
   
   

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

   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
   73
         var trailheads = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
           });
   
         trailheads.addTo(map);
   
         var trails = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0"
           });
   
         trails.addTo(map);
   
         var parks = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0"
           });
   
   

   Expand

3. Add the parks layer to the map.

   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
   73
         var trailheads = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
           });
   
         trailheads.addTo(map);
   
         var trails = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0"
           });
   
         trails.addTo(map);
   
         var parks = L.esri
           .featureLayer({
             url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space_Styled/FeatureServer/0"
           });
   
         parks.addTo(map);
   

   Expand

Run the app

In CodePen, run your code to display the map.

Your map should display the locations of trailheads, trails, and open spaces in the Santa Monica Mountains.

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 ArcGIS location services in these tutorials: