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 tutorial, you will build a simple mapping app with a basemap and a feature layer that represents trailheads near Los Angeles.


Create a starter app

  1. Go to the JavaScript Starter App.

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

Add a point layer

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

          //*** ADD ***//
        ], 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 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/0"

    NOTE: If the layers have not been previously configured and saved with styles, the API will load each layer and apply a default symbol. To learn how to style the layers and improve the visualization, try the Style feature layers tutorial.

  3. Run your code to view the map with the trailheads layer.

Congratulations, you're done!

Your app should look something like this.


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. Create a new layer variable for each layer.

  • Trails (line)


  • Parks and Open Spaces (polygon)


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/0",
        definitionExpression: "ELEV_GAIN < 250"