Overview

You will learn: how to load and display a pre-configured layer from ArcGIS Online..

Applications can access layer items that are hosted on ArcGIS Online and ArcGIS Enterprise portals. 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 Styled layer on ArcGIS Online and 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",
          //*** ADD ***//
          "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 Styled (lines) and Parks and Open Spaces Styled (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.

Learn how to pre-configuring layers in the Configured layers tutorial and learn how to style feature layers programmatically in the Style feature layers tutorial.

Congratulations, you're done!

Your app should look something like this.

Challenge

Limit layer features with a SQL definition expression

You can update layer properties by setting the values before it is displayed. For example, you can update the popup, renderer, or definitionExpression. Update the layer to apply a SQL definition expression to limit the data returned from a layer. Update the addLayer function to define an expression that limits the Trails to only those with an elevation gain less than 250 ft. Explore the data and try defining your own expressions.

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

Learn more about definition expressions and supported SQL queries in the documentation.