Add a feature layer

Learn how to add featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more from feature layersA feature layer (client-side) is a data layer that can access and display features from a feature service that has the same type of geometry and attribute fields.Learn more to a mapA map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers.Learn more.

A feature layerA feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields.Learn more is a dataset in a hosted feature serviceA feature service is a data service that provides access to spatial and non-spatial data in feature layers, feature layer views, and tables.Learn more. Each feature layer contains featuresA feature is a single record, also known as a row, that represents a real-world entity. It typically contains a geometry (point, multipoint, polyline, or polygon) and attributes but it can also contain just attributes.Learn more with a single geometryA geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference.Learn more type (point, line, or polygon), and a set of attributesAttributes are fields and values for a single feature or non-spatial record. They are typically stored in a database or service such as a feature service.Learn more. 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 layersA feature layer (server-side) is a spatially-enabled table in a feature service. All features in a feature layer share the same geometry type and set of fields.Learn more.

The feature layers are:

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

Prerequisites

Steps

Get the starter app

Select a type of authentication and follow the steps to create a new app.

Set up authentication

Set developer credentials

Use the API key or OAuth developer credentialsDeveloper credentials are a type of item in a portal that contains parameters for authentication. There are two types of developer credentials: API key credentials and OAuth credentials.Learn more so your application can access ArcGIS servicesA service, also known as an ArcGIS service, is software that supports an ArcGIS REST API and provides geospatial functionality or data. A service can be hosted by Esri or in ArcGIS Enterprise.Learn more.

Add a point feature layer

Point featuresA point is a type of geometry containing a single set of x,y coordinates and a spatial reference.Learn more are typically displayed in a feature layerA hosted feature layer is a hosted layer (item) in a portal that is used to manage the properties and settings of a spatially-enabled feature layer in a feature service.Learn more 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
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           token: accessToken
         }).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
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
         L.esri.Vector.vectorBasemapLayer(basemapEnum, {
           token: accessToken
         }).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 layerA layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services.Learn more in the map.

Add a line feature layer

Line featuresA polyline is a type of geometry containing ordered point coordinates and a spatial reference.Learn more are typically displayed in a feature layerA hosted feature layer is a hosted layer (item) in a portal that is used to manage the properties and settings of a spatially-enabled feature layer in a feature service.Learn more below pointsA point is a type of geometry containing a single set of x,y coordinates and a spatial reference.Learn more. 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
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
         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
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
         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 layerA layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services.Learn more in the map.

Add a polygon feature layer

Polygon featuresA polygon is a type of geometry containing an array of rings and a spatial reference. Each ring contains an array of point coordinates, where the first and last point are the same.Learn more are typically displayed in a feature layerA hosted feature layer is a hosted layer (item) in a portal that is used to manage the properties and settings of a spatially-enabled feature layer in a feature service.Learn more below linesA polyline is a type of geometry containing ordered point coordinates and a spatial reference.Learn more. 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
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
         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
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
         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

Run the app.

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

The map viewA map view is a user interface that displays map layers and graphics in 2D. It controls the area (extent) of the map that is visible and supports user interactions such as pan and zoom.Learn more should display all three feature layersA hosted feature layer is a hosted layer (item) in a portal that is used to manage the properties and settings of a spatially-enabled feature layer in a feature service.Learn more in the map. The map view draws the map in following order:

1. Topographic basemap layerA basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service.Learn more
2. Trailheads (pointsA point is a type of geometry containing a single set of x,y coordinates and a spatial reference.Learn more)
3. Trails (linesA polyline is a type of geometry containing ordered point coordinates and a spatial reference.Learn more)
4. Parks and Open Spaces (polygonsA polygon is a type of geometry containing an array of rings and a spatial reference. Each ring contains an array of point coordinates, where the first and last point are the same.Learn more)

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