AnsweredAssumed Answered

Accessing MapImageLayer Sub Layers from WebMap Map Object

Question asked by MDonnellyesriaustralia-com-au-esridist Employee on Jul 30, 2019
Latest reply on Jul 30, 2019 by MDonnellyesriaustralia-com-au-esridist

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>

 

Outcomes