Accessing MapImageLayer Sub Layers from WebMap Map Object

Question

As per my tongue twister subject I am trying to work with MapImageLayer objects and their sub layers in V4 of the JS API. I have hydrated a web map into a map object. The web map has a map service (/MapServer), which is hydrated, naturally, to a MapImageLayer object. However, despite the map service having sub layers, they are not available to the layer object. At least this is what I surmise by interrogating the layer object’s allSubLayers property, which is empty. I feel like I'm missing a trick here. The API reference talks about working with sub layers but only when defined by the programmer, not coming from a web map. Ultimately, I aim to set layer definition queries on the sub layers but just need to get those layer objects before queries can be applied. I have created a test harness below, which illustrates my conundrum: <DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Load a basic WebMap - 4.11</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.11/"></script> <script> require(["esri/views/MapView", "esri/WebMap", "esri/config", "esri/widgets/LayerList"], function (MapView, WebMap, esriConfig, LayerList) { var webmap = new WebMap({ portalItem: { // autocasts as new PortalItem() id: "90613226a9bc41998a1c893d596badc8" } }); webmap.when(function () { var allLayersAndSublayers = webmap.allLayers.flatten(function (item) { return item.layers || item.sublayers; }); var layerList = new LayerList({ view: view }); view.ui.add(layerList, { position: "top-left" }); }); /************************************************************ * Set the WebMap instance to the map property in a MapView. ************************************************************/ var view = new MapView({ map: webmap, container: "viewDiv" }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · Accepted Answer

Mark, you have to wait for the MapImageLayer to be loaded completely. if(item.type === 'map-image'){ item.watch('loaded', function(){ return item.layers || item.sublayers; }); }‍‍‍‍‍