Remove layers from the layerWidget

2371
3
Jump to solution
04-17-2019 01:01 AM
KennethLindhardt1
Occasional Contributor II

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.

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

3 Replies
KenBuja
MVP Esteemed Contributor

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
KennethLindhardt1
Occasional Contributor II

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

0 Kudos
KenBuja
MVP Esteemed Contributor

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

0 Kudos