Overview

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

With the ArcGIS API for JavaScript it's easy to create a new web mapping app that displays a basemap and layer. ArcGIS Online hosts a number of tile and vector tile basemaps that you can choose from, including streets, satellite, streets-vector, and streets-navigation-vector. You can also add your own datasets by adding feature layers. These layers are hosted by ArcGIS Online or by other ArcGIS servers. By default, feature layers will draw with pre-set symbols to fill the extent of the map, but you can provide your own styles with a renderer. The feature layer data can also be controlled by defining a SQL expression to limit the data retrieved. Another common customization is to configure the pop-up to show specific information about the layer when you click on features in the map.

In this lab, you will build a simple mapping app with a basemap and a feature layer that represents trailheads near Los Angeles.

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

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

Add a point layer

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

    require([
      "esri/Map",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/layers/FeatureLayer",
      "dojo/domReady!"
      //*** ADD ***//
    ], function(Map, MapView, FeatureLayer) {
    
  2. In the function, create a new FeatureLayer and set the url property to the Trailheads endpoint. Add the feature layer to the Map.

      //*** ADD ***//
      // Trailheads point feature layer
      var featureLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer"
      });
    
      map.add(featureLayer);
    
  3. Run your code to view the map with the trailheads layer.

Congratulations, you're done!

Your app should look something like this.

Challenge

Add more layers

Use the urls below to add a additional layers to the map. Add the polygon and line layers first so the point layer is drawn on top.

  • Trails (line)

    https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer

  • Parks and Open Spaces (polygon)

    https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer

Filter features

Sometimes it's necessary to limit the data retrieved from a service. One way to accomplish this is by applying a SQL expression to the layer. Try defining an expression that limits the Trail Lines to those with an elevation gain less than 250.

  // Trails
  var featureLayer = new FeatureLayer({
    url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer",
    definitionExpression: "ELEV_GAIN < 250"
  });