topic Can a feature layer be added to a webmap object in ArcGIS Javascript 4.13? in ArcGIS JavaScript Maps SDK Questions

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

EdFratto — Mon, 09 Mar 2020 16:18:16 GMT

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]

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

KenBuja — Sat, 11 Dec 2021 22:04:33 GMT

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

EdFratto — Mon, 09 Mar 2020 16:37:13 GMT

Thanks, examples are so helpful!

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

KenBuja — Mon, 09 Mar 2020 16:38:21 GMT

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

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

YashMore — Tue, 22 Dec 2020 23:47:04 GMT

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?

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

Oyvind — Wed, 12 May 2021 10:33:54 GMT

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); });