Add a feature layer | ArcGIS Maps SDK for JavaScript

Learn how to access and display point A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more , line A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more , and polygon A 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 features A 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 in feature layers A 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 .

A feature layer A 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 service A 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 features A 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 geometry A 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 A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more , line A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more , or polygon A 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 ), and a set of attributes Attributes 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 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 A 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 :

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 An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with the correct privileges to access the location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial.

Go to the Create an API key tutorial and create an API key An API key is a long-lived access token created using API key credentials. They are valid for up to one year and are typically embedded directly into client applications. Learn more with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :
- 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 API key credentials are an item that contains the parameters used to create and manage long-lived access tokens for API key authentication. They are a type of developer credential. Learn more access to the layer item. Learn more in Item access privileges.
In CodePen, set the apiKey property on the global esriConfig variable to your access token.
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 ArcGIS Maps SDK for JavaScript, previously known as ArcGIS API for JavaScript, is a developer product for building mapping and spatial analysis applications for the web. Learn more 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.

30 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a feature layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

  </script>
4 collapsed lines

</body>

</html>

Add a point feature layer

Point A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more features A 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 are typically displayed in a feature layer A 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 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, use document.querySelector() to get a reference to the Map component, then wait for it to be ready with the viewOnReady method. Next, create a FeatureLayer and set the url property.

30 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a feature layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

  </script>
4 collapsed lines

</body>

</html>

Add trailheadsLayer to the map.

36 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a feature layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    viewElement.map.add(trailheadsLayer);
6 collapsed lines

  </script>

</body>

</html>

Run the app to view the Trailheads layer A 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 A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more features A 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 are typically displayed in a feature layer A 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 before points A 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.

Go to the Trails URL and browse the properties of the layer A 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 . Make note of the Name, Type, Drawing Info, and Fields properties.

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

41 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a feature layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    viewElement.map.add(trailheadsLayer);

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

  </script>

</body>

</html>

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.

43 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a feature layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    viewElement.map.add(trailheadsLayer);

    // 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);
6 collapsed lines

  </script>

</body>

</html>

Run the app to view the Trails layer A 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 A 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 features A 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 are typically displayed in a feature layer A 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 before lines A 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.

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.

48 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a feature layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    viewElement.map.add(trailheadsLayer);

    // 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);

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

  </script>

</body>

</html>

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.

50 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Add a feature layer</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <script>
    var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.020" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

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

    viewElement.map.add(trailheadsLayer);

    // 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);

    // 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);
6 collapsed lines

  </script>

</body>

</html>

Run the app

In CodePen, run your code to display the map.

The map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more should display all three feature layers A 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 in the map in following order:

Topographic basemap layer A 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
Parks and Open Spaces (polygons A 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 )
Trails (lines A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more )
Trailheads (points A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. 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 SDK features and ArcGIS services in these tutorials: