Overview

You will learn: how to add feature layers to a 2D map.

Applications can access and display layers that are hosted on ArcGIS Online and ArcGIS Enterprise. Each hosted layer is a feature service that has a unique url endpoint. You can use a feature layer to access the url endpoint and draw the point, line, or polygon features in a map. Feature layers give you the ability to set your own custom styles by defining a renderer. Pop-ups can also be defined to display attribute information when users click on features in the map. The features requested from the server can also be restricted by defining a SQL definition expression for the feature layer.

In this tutorial, you will use feature layers to access and display hosted data (Trailheads, Trails, and Parks and Open Spaces) that are stored in ArcGIS Online.

To learn more about working with data and feature layers, visit the Import data, Style feature layers, and Configure pop-ups tutorials.

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

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

Add the Trailheads feature layer

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

        require([
          "esri/Map",
          "esri/views/MapView",
          //*** ADD ***//
          "esri/layers/FeatureLayer"
        ], 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({
            url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
          });
    
          map.add(trailheadsLayer);
    
  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({
            url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0"
          });
    
          map.add(trailsLayer, 0);
    
          // Parks and open spaces (polygons)
          var parksLayer = new FeatureLayer({
            url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0"
          });
    
          map.add(parksLayer, 0);
    
  2. Run your code to view the map. You should see all three layers.

NOTE: The Trailheads, Trails, and Parks and Open Spaces feature services do not have styles associated with them, so the feature layers are using 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.

Challenge

Filter features with a SQL definition expression

You can update layer properties by setting the values before it loads. For example, you can update the popup, renderer, or definitionExpression. Update the layer to limit the data returned from a hosted feature service by applying a SQL definition expression to the feature layer. Define an expression that limits the trail lines to only those with an elevation gain less than 250 ft. Explore the data and try defining your own expressions.

      // Trails feature layer (lines)
      var trailsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        //*** ADD ***//
        definitionExpression: "ELEV_GAIN < 250"
      });

Learn more about definition expressions and supported SQL queries in the documentation.

Content