Add a feature layer

Learn how to access and display , , and in .

A is a dataset in a hosted . Each feature layer contains with a single type (, , or ), and a set of . 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 :

Prerequisites

Steps

Create a new pen

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

Get an access token

You need an with the correct privileges to access the used in this tutorial.

  1. Go to the Create an API key tutorial and create an with the following :
    • Privileges
      • Location services > Basemaps
    • Item access
      • Note: If you are using your own custom data layer for this tutorial, you need to grant the access to the layer item. Learn more in Item access privileges.
  2. In CodePen, set esriConfig.apiKey to your access token.
    1
    2
    3
    4
    5
    6
    7
    8
    9
      var esriConfig = {
        apiKey: "YOUR_ACCESS_TOKEN"
      };
    

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

Add modules

  1. In a new <script> at the bottom of the <body>, use a require statement to add the FeatureLayer module.

    Expand
    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
      <script>
        require(["esri/layers/FeatureLayer"], (FeatureLayer) => {
    
        });
      </script>
    
    Expand

Add a point feature layer

are typically displayed in a 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. 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
    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
      <script>
        require(["esri/layers/FeatureLayer"], (FeatureLayer) => {
    
          const arcgisMap = document.querySelector("arcgis-map");
          arcgisMap.addEventListener("arcgisViewReadyChange", () => {
    
            // Trailheads feature layer (points)
            const trailheadsLayer = new FeatureLayer({
              url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
            });
    
          });
    
        });
      </script>
    
    Expand
  3. Add trailheadsLayer to the map.

    Expand
    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
            // Trailheads feature layer (points)
            const trailheadsLayer = new FeatureLayer({
              url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
            });
    
            arcgisMap.addLayer(trailheadsLayer);
    
    Expand
  4. Run the app to view the Trailheads in the map.

Add a line feature layer

are typically displayed in a before . 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 . Make note of the Name, Type, Drawing Info, and Fields properties.

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

    Expand
    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
            arcgisMap.addLayer(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
    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
            // Trails feature layer (lines)
            const trailsLayer = new FeatureLayer({
              url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
            });
    
            arcgisMap.addLayer(trailsLayer, 0);
    
    Expand
  4. Run the app to view the Trails in the map.

Add a polygon feature layer

are typically displayed in a before . 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
    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
            arcgisMap.addLayer(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
    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
            // Parks and open spaces (polygons)
            const parksLayer = new FeatureLayer({
              url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
            });
    
            arcgisMap.addLayer(parksLayer, 0);
    
    Expand

Run the app

In CodePen, run your code to display the map.

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

  1. Topographic
  2. Parks and Open Spaces ()
  3. Trails ()
  4. Trailheads ()

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:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close