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

633
5
Jump to solution
03-09-2020 09:18 AM
EdFratto
New Contributor

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]

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

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

5 Replies
KenBuja
MVP Honored Contributor

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

EdFratto
New Contributor

Thanks, examples are so helpful!

0 Kudos
KenBuja
MVP Honored Contributor

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

0 Kudos
YashMore
New Contributor

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?

0 Kudos
Oyvind
by
New Contributor

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

 

 

 

 

0 Kudos