Community

Accessing MapImageLayer Sub Layers from WebMap Map Object

1108
2
Jump to solution
07-30-2019 12:10 AM
mdonnelly
by Esri Contributor
Esri Contributor
‎07-30-2019 12:10 AM

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
by MVP Emeritus
MVP Emeritus
‎07-30-2019 06:31 AM

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
by MVP Emeritus
MVP Emeritus
‎07-30-2019 06:31 AM

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
by Esri Contributor
Esri Contributor
‎07-30-2019 05:50 PM

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