Add layers to a map

Overview

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.

Steps

Create a starter app

1. Open the JavaScript Starter App on CodePen.

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",
         "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.

Congratulations, you're done!

Your app should look something like this.

Challenge

Explore the hosted feature layers

Set properties on a feature layer

      // 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",

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