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

EdFratto

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

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

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

    <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
      html<SPAN class="punctuation token">,</SPAN>
      body<SPAN class="punctuation token">,</SPAN>
      #viewDiv <SPAN class="punctuation token">{</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
        width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

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

    <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/4.13/"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>

    <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
      <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/WebMap"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>MapView<SPAN class="punctuation token">,</SPAN> WebMap<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="comment token">/************************************************************
         * 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.
         ************************************************************/</SPAN>
        <SPAN class="keyword token">var</SPAN> webmap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">// autocasts as new PortalItem()</SPAN>
            id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"f2e9b762544945f390ca4ac3671cfa72"</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

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

  <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>