Overview

You will learn: how to load a layer from an ArcGIS Online item and add it to a map.

The ArcGIS API for JavaScript allows you to access items such as layers, vector tile basemaps and web maps stored in ArcGIS Online. As demonstrated in the Display a web map lab, you can load and display an existing web map that contains a preconfigured basemap and layers. Alternatively, you can load the individual layers directly from ArcGIS Online and build your map with code. To do so, you need to access each item by id. You can find an item's id by browsing to the item on ArcGIS Online and identifying it at the end of the url. e.g. https://www.arcgis.com/home/item.html?id=fbca9c87feb94ba5b00411b3a00809f3

In this lab you will learn how to access layers stored in ArcGIS Online. You will open the layer using its identifier and display its contents on a map.

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 a layer from an item.

Add the Trailheads layer by id

  1. In your browser, go to the Trailheads Styled layer on ArcGIS Online and find the item id at the end of the url. It should be 2e4b3df6ba4b44969a3bc9827de746b3.

  2. In the require statement, add a reference to the Layer module.

    require([
      "esri/Map",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/layers/Layer",
      "dojo/domReady!"
      //*** ADD ***//
    ], function(Map, MapView, Layer) {
    
  3. In the function, use the static member Layer and the fromPortalItem method to access the Trailheads dataset. Set the id property of the portalItem to 2e4b3df6ba4b44969a3bc9827de746b3. After the item is loaded, use the callback function to add the layer to the map.

      //*** ADD ***//
      var trailheads = Layer.fromPortalItem({
          portalItem: {
            id: "2e4b3df6ba4b44969a3bc9827de746b3"
          }
        });
      trailheads.then(function(layer){
        map.add(layer);
      });
    
  4. Run your code to view the layer.

Add the Trails and Parks and Open Space layers by id

  1. Use the same code pattern in step 5. to load two more layers into the map. Go to the Trails Styled and the Parks and Open Space Styled layers to find the ids and then add the code to add them to the map.

  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

Order the layers

The layers are loaded asynchronously and this doesn't guarantee the order they are added to the map. To to ensure the layers are added in the correct order, remove the callback .then() function and use the promisesUtil to add the layers in the same order as they were created:

  1. Trailheads (top)
  2. Trails
  3. Parks and Open Space (bottom)
require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/Layer",
      "esri/core/promiseUtils",
      "dojo/domReady!"
    ], function(Map, MapView, Layer, promiseUtils) {

    // Trailheads
    var trailheads = Layer.fromPortalItem({
        portalItem: {
          id: "2e4b3df6ba4b44969a3bc9827de746b3"
        }
      });

    // Trails
    var trails = Layer.fromPortalItem({
        portalItem: {
          id: "6b8ca89d2bd2418f8b91b030f9832ab8"
        }
      });

    // Parks
    var parks = Layer.fromPortalItem({
        portalItem: {
          id: "fbca9c87feb94ba5b00411b3a00809f3"
        }
      });

    promiseUtils.eachAlways([trailheads, trails, parks])
      .then(function(promises){
        for (var i = 0; i < promises.length; i++){
          map.add(promises[i].value,0);
        }
      });

Load a custom vector style basemap by item

Vector tile basemaps are also stored as items in ArcGIS Online. Try adding the Parks and Forest Canvas item to the map as a basemap. Browse to the item and identify the id. If you need help, go to the Display a styled vector basemap lab and follow the steps.