Skip To ContentArcGIS for DevelopersSign In Dashboard


You will learn: how to build an app that displays feature layers in a 2D map.

Applications can access and display feature layers that are hosted onArcGIS OnlineorArcGIS Enterprise. A hosted feature layer contains features (records) with a geometry and a set of attributes. Each hosted feature layer has a REST endpoint with a unique URL. A FeatureLayer class can use the URL to access and draw the point, line, or polygon features in a map. If properties such as the renderer or pop-up have not been pre-defined for the hosted feature layer, the map will use default symbols and pop-ups will not be enabled. To learn how to enhance the visualization and behavior of feature layers, visit the Style feature layers, Configure pop-ups, and Filter a feature layer tutorials.

In this tutorial, you will add the Trailheads, Trails, and Parks and open spaces hosted feature layers to the map.

Explore the feature layers in the map below.


Create a starter app

  1. Open the JavaScript Starter App on CodePen.

  2. In CodePen, click Fork and save the pen as ArcGIS API for JavaScript Tutorials: Add layers to a map.

Add the Trailheads feature layer

  1. In the require statement, add a reference to the FeatureLayer module.

        ], function(Map, MapView, FeatureLayer) {
  2. At the end of the code in the main function, create a new FeatureLayer and set the url property to the Trailheads (points) feature service. Add the feature layer to the Map.

    // Trailheads feature layer (points)
    var trailheadsLayer = new FeatureLayer({
  3. Run your code to view the map with the trailheads layer.

Add the Trails and Parks and Open Space feature layers

  1. Add the Trails (lines) and Parks and Open Spaces (polygons) feature layers to the map. Use the URLs below and the add method with 0 to add the layers to the beginning of the collection so they draw in the correct order: polygons, lines, and then points.

    // Trails feature layer (lines)
    var trailsLayer = new FeatureLayer({
    map.add(trailsLayer, 0);
    // Parks and open spaces (polygons)
    var parksLayer = new FeatureLayer({
    map.add(parksLayer, 0);
  2. Run your code to view the map. You should see all three layers.

NOTE: The hosted feature layers do not have styles or pop-ups defined for them on the server-side, so feature layers use default symbols to draw them in the map. To learn how to improve the visualization of the feature layers, try the Configure layers tutorial to apply styles on the server-side and the Style feature layers tutorial to apply styles on the client-side.

Congratulations, you're done!

Your app should look something like this.


Explore the hosted feature layers

Go to each hosted feature service URL endpoint to learn more about the meta data, data and the functions that are supported. Each link will display the layer type, geometry type, extent, drawing information, fields and more. At the bottom of each page look for "Supported Options" and try using the Query functionality to find and return records in each dataset. A FeatureLayer uses these functions behind the scenes to get data and draw it on the map.

Learn more about working with feature layers in the Import data and Explore layer data tutorials.

Set properties on a feature layer

Additional properties can be set on a feature layer to change how it draws and behaves. Set the definitionExpression to only draw trails with less than 250 ft of elevation gain, a renderer to draw the trails in green, and a popupTemplate to show the trail name and the all of the fields in the pop-up.

Run the app again and click on trail features.

// Trails feature layer (lines)
var trailsLayer = new FeatureLayer({
  url: "",
  //*** ADD ***//
  definitionExpression: "ELEV_GAIN < 250",

  //*** ADD ***//
  renderer: {
    type: "simple",
    symbol: {
      type: "simple-line",
      color: "green",
      width: "2px"

  //*** ADD ***//
  outFields: ["TRL_NAME", "ELEV_GAIN"],

  //*** ADD ***//
  popupTemplate: {
    // Enable a popup
    title: "{TRL_NAME}", // Show attribute value
    content: "The trail elevation gain is {ELEV_GAIN} ft." // Display text in pop-up

Learn more about working with layers in the Filter a feature layer, Query a feature layer, Style feature layers, and Configure pop-ups tutorials.