Add sublayers from a Hosted Feature Layer View

[Jeff-Reinhart]

Is it possible to add individual sublayers from a Hosted Feature Layer View? Please see this portal item for example. When I declare this as

const pItem = new PortalItem({
    id: '4601abb43d564387a785aeaaba8d7486'
})

const ftLayer = new FeatureLayer({
    portalItem: pItem
})

All I get is sublayer 0. I have looked through properties on the PortalItem and am not seeing a way to reference individual sublayers. The sublayers on the view do not have an ID to reference. I have tried adding &sublayer=1 to the PortalItem.id. Is there some other class I should be using between the FeatureLayer and the PortalItem? I looked at GroupLayer for that, but that seems to be built on the client side rather than unpacking something from the server.

[ReneRubalcava · Accepted solution]

Ah. For stuff like this, you can use Layer.fromPortalItem. It's useful to load an entire FeatureService or any layer where you have the item, but don't know the layer type.

You can do something like this.

Layer.fromPortalItem({
	portalItem: {
		id: "4601abb43d564387a785aeaaba8d7486",
	}
}).then(async (layer) => {
	// Will be a GroupLayer
	// await layer.load();
	// layer.layers -> [a, b] has two layers in the group
	// pull out layer you are interested in
	// and add only that layer.
	// map.add(layer.layers.at(1));
	
	// add the whole GroupLayer
	map.add(layer);
});

Here is a codepen.

[Jeff-Reinhart]

Thanks, @ReneRubalcava , got it working!

Took a bit of finagling in TypeScript...

const pItem = new PortalItem({
  id: '4601abb43d564387a785aeaaba8d7486'
})

Layer.fromPortalItem({
  portalItem: pItem
}).then(async (layer) => {
  await layer.load()
  const groupLayer = layer as GroupLayer
  this.map.add(groupLayer.layers.at(0))
})

---

Curiously, sublayer 1 came through as item 0. Easy enough to sort out though.