topic Re: Remove layers from the layerWidget in ArcGIS JavaScript Maps SDK Questions

Remove layers from the layerWidget

KennethLindhardt1 — Wed, 17 Apr 2019 08:01:08 GMT

Hi, I’m new to JavaScript, but are starting to get a need app build up, with the help from GeoNet. I’ve used the layerWidget, but some layers I need to hide in the widget. I would expect to use the listMode property to do that, but I can’t seem to hit the right syntax to do so.

I’m creating a SceneView with a WebScene, and the layerWidget shows all of those layers.

var layerWidget = new LayerList({

view: sceneView,

container: "layerPanelDiv"

});

But if I want the layer widget not to show a layer from the scene called Cars, so the end user not will be able to turn it off or even see that it exist, how do I do so?

Thanks.

Re: Remove layers from the layerWidget

KenBuja — Sat, 11 Dec 2021 14:42:58 GMT

This code (lines 49-54) hides a specific layer in a WebScene from the LayerList widget. Compare it with the original sample. This code comes from this discussion.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>LayerList widget - 4.11</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    </style>

    <script src="https://js.arcgis.com/4.11/"></script>

    <script>
      require([
        "esri/views/SceneView",
        "esri/widgets/LayerList",
        "esri/WebScene"
      ], function(SceneView, LayerList, WebScene) {
        var scene = new WebScene({
          portalItem: {
            // autocasts as new PortalItem()
            id: "adfad6ee6c6043238ea64e121bb6429a"
          }
        });

        var view = new SceneView({
          container: "viewDiv",
          map: scene
        });

        view.when(function() {
          var hideLayer = view.map.layers.flatten(function(item){
            return item.layers || item.sublayers;
          }).find(function(layer){
            return layer.title === "Buildings";
          });
          hideLayer.listMode = "hide";
          var layerList = new LayerList({
            view: view
          });

          // Add widget to the top right corner of the view
          view.ui.add(layerList, "top-right");
        });
      });
    </script>
  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Remove layers from the layerWidget

KennethLindhardt1 — Wed, 17 Apr 2019 15:07:12 GMT

Thank you so much, was going back and forward that example, but couldn’t make it fit. Now it works, thank you.

Re: Remove layers from the layerWidget

KenBuja — Wed, 17 Apr 2019 15:18:32 GMT

Glad to help. Don't forget to click the "Mark Correct" button.