Add a layer from an item

Overview

You will learn: how to build an app that loads and displays a layer from ArcGIS Online.

Applications can access layer items that are hosted onArcGIS OnlineorArcGIS Enterpriseportals. Each layer item contains the settings for the hosted feature layer such as the URL to access the data, the styles used to draw the layer, the pop-up configuration, and the data filters. These settings can be pre-configured interactively using portal tools. Applications can load layer items by accessing a portal and requesting the item by ID. The benefit of loading a layer item is that all of the layer settings will be applied when the item is loaded, saving you time from having to set them up yourself. Learn more about working with layers in the Configure layers tutorial.

In this tutorial, you will add layers to the map that have been pre-configured and stored in ArcGIS Online.

Zoom in and click the map below to see the pre-configured styles and pop-ups.

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

Add the Trailheads layer by id

1. In your browser, go to the Trailheads layer onArcGIS Onlineand find the item ID at the end of the URL. It should be 33fc2fa407ab40f9add12fe38d5801f5.

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

       require([
         "esri/Map",
         "esri/views/MapView",
         "esri/layers/Layer"
       ], function(Map, MapView, Layer) {
   

3. At the end of the code in the main function, define a function that will be used to add layers to the map. The function will wait for the portalItem to be loaded and then will add the layer to the map in the specified index position.

         function addLayer(layerItemPromise, index) {
           return layerItemPromise.then(function(layer){
             map.add(layer, index);
           });
         }
   

4. Use the static member Layer and the fromPortalItem method to access the Trailheads (points) layer. Set the id property of the portalItem to 33fc2fa407ab40f9add12fe38d5801f5. Use the addLayer function to add the layer to the map.

         var trailheadsPortalItem = Layer.fromPortalItem({
           portalItem: {
             id: "33fc2fa407ab40f9add12fe38d5801f5"
           }
         });
   
         addLayer(trailheadsPortalItem, 0);
   

5. Run your code to view the layer.

Add the Trails and Parks and Open Space layers by id

1. Use the fromPortalItem method again to load the Trails (lines) and Parks and Open Spaces (polygons) layers by id. Use the addLayer function to load the layers in the correct drawing order.

         var trailheadsPortalItem = Layer.fromPortalItem({
           portalItem: {
             id: "33fc2fa407ab40f9add12fe38d5801f5"
           }
         });
   
         //*** ADD ***//
   
         // Trails
         var trailsPortalItem = Layer.fromPortalItem({
           portalItem: {
             id: "52a162056a2d48409fc3b3cbb672e7da"
           }
         });
   
         // Parks
         var parksPortalItem = Layer.fromPortalItem({
           portalItem: {
             id: "83cf97eea04e4a699689c250dd07b975"
           }
         });
   
         //*** ADD ***//
   
         addLayer(trailheadsPortalItem, 2)
           .then(addLayer(trailsPortalItem, 1))
           .then(addLayer(parksPortalItem, 0));
   
   

2. Run your code to view the map. You should see three layers with pre-configured styles. Click on the features to view the pre-configured pop-ups.

Congratulations, you're done!

Your app should look something like this.

Challenge

Limit layer features with a SQL definition expression

     function addLayer(layerItemPromise, index) {
       return layerItemPromise.then(function(layer){
         layer.when(function(){
           if (layer.title === "Trails_Styled_Popups") {
            layer.definitionExpression = "ELEV_GAIN < 250";
           }
          });
          map.add(layer, index);
       });
     }