Accessing MapImageLayer Sub Layers from WebMap Map Object

707
2
Jump to solution
07-30-2019 12:10 AM
mdonnelly
Esri Contributor

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>

Regards,
Mark
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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;
  });
}
mdonnelly
Esri Contributor

Thanks Robert,

Thought by waiting for the web map to load that the underlying sub layers would've already loaded.

Got caught out on the classic asynch web programming catch: your object's not fully loaded yet dummy!

I have since been able to confirm that the sub layers are indeed loading if I give them enough time.

Mark

Regards,
Mark
0 Kudos