Can a feature layer be added to a webmap object in ArcGIS Javascript 4.13?

EdFratto · ‎03-09-2020

For a regular map object, you can add a layer with:

layers: [layer1, layer2]

or by using:

map.add(layer1)

How can you do this same thing with a WebMap object?

webmap.add(layer1) doesn't work for me and neither does adding the layers: [layer1, layer2]

KenBuja · ‎03-09-2020

Yes you can. Starting with this sample, I'm adding a FeatureLayer of county poverty data.

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the webmap-basic sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/webmap-basic/index.html
  -->
<title>Load a basic WebMap - 4.13</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
    />

    <script src="https://js.arcgis.com/4.13/"></script>

    <script>
      require(["esri/views/MapView", "esri/WebMap", "esri/layers/FeatureLayer"], function(MapView, WebMap, FeatureLayer) {
        /************************************************************
         * Creates a new WebMap instance. A WebMap must reference
         * a PortalItem ID that represents a WebMap saved to
         * arcgis.com or an on-premise portal.
         *
         * To load a WebMap from an on-premise portal, set the portal
         * url with esriConfig.portalUrl.
         ************************************************************/
        var webmap = new WebMap({
          portalItem: {
            // autocasts as new PortalItem()
            id: "f2e9b762544945f390ca4ac3671cfa72"
          }
        });

        /************************************************************
         * Set the WebMap instance to the map property in a MapView.
         ************************************************************/
        var view = new MapView({
          map: webmap,
          container: "viewDiv"
        });
        
        var layer = new FeatureLayer({
          url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0",
          outFields: ["*"]
        });
        
        webmap.add(layer);
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

KenBuja · ‎03-09-2020

Yes you can. Starting with this sample, I'm adding a FeatureLayer of county poverty data.

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the webmap-basic sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/webmap-basic/index.html
  -->
<title>Load a basic WebMap - 4.13</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
    />

    <script src="https://js.arcgis.com/4.13/"></script>

    <script>
      require(["esri/views/MapView", "esri/WebMap", "esri/layers/FeatureLayer"], function(MapView, WebMap, FeatureLayer) {
        /************************************************************
         * Creates a new WebMap instance. A WebMap must reference
         * a PortalItem ID that represents a WebMap saved to
         * arcgis.com or an on-premise portal.
         *
         * To load a WebMap from an on-premise portal, set the portal
         * url with esriConfig.portalUrl.
         ************************************************************/
        var webmap = new WebMap({
          portalItem: {
            // autocasts as new PortalItem()
            id: "f2e9b762544945f390ca4ac3671cfa72"
          }
        });

        /************************************************************
         * Set the WebMap instance to the map property in a MapView.
         ************************************************************/
        var view = new MapView({
          map: webmap,
          container: "viewDiv"
        });
        
        var layer = new FeatureLayer({
          url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0",
          outFields: ["*"]
        });
        
        webmap.add(layer);
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

EdFratto · ‎03-09-2020

Thanks, examples are so helpful!

KenBuja · ‎03-09-2020

If this has answered your question, please click the Mark Correct button.

YashMore · ‎12-22-2020

This method adds the layer below the webmap. So if the webmap has opacity as 1 the layer is not visible. Anyone know the solution for that?

Oyvind · ‎05-12-2021

The problem here is the index of the layer. When the WebMap loads the layers from the portal, they seem to be appended to the existing list (which contains your layer). Since your layer is now on the top of the list, it will be rendered first, then everything else on top of it.

My approach to solving this is to

1) Create the WebMap (and MapView)

2) Wait for WebMap to load, using the .when() method

3) In the function provided to .when(), add your own layer(s) using .add(layer, index) or .addMany([layers], index) if you got several. The index is the amount of existing layers, found in WebMap.allLayers.length.

Pseudo code example:

    const webMap = new WebMap({
        portalItem: ...
      });

    webMap.when(() => {
       webMap.add(myFeaureLayer, webMap.allLayers.length);
    });