I'm trying to hide the eyeball icon for grouplayers in the layer list

JayHill — Thu, 10 Jan 2019 18:08:56 GMT

When I grab the element and change it to display = 'none' it changes that css for all the layerlist items. Not just the one grouplayer. Whats the best way to single out the groupLayer css only?

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

RobertScheitlin__GISP — Thu, 10 Jan 2019 19:00:10 GMT

Jay,

So you are trying to hide the eye icon for one specific group layer or all group layers?

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

JayHill — Thu, 10 Jan 2019 19:58:46 GMT

all group layers

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

KellyHutchins — Sat, 11 Dec 2021 16:22:11 GMT

Jay,

Do you want to prevent users from being able to toggle the visibility of the group layers by clicking the title area/eyeball icon? Or do you just want to hide the eyeball? If so you can do it with this css. Note: I haven't tested this css with many layers so there could be some cases where it doesn't hide the eyeball.

.esri-layer-list__child-toggle + .esri-layer-list__item-label > .esri-layer-list__item-toggle {
 display:none;
}‍‍‍

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

JayHill — Thu, 10 Jan 2019 23:25:28 GMT

Yes Kelly! That was it! Thanks

Can you explain the adjacent selection though?

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:22:15 GMT

Jay,

It is a little hard to explain and wrap your head around but here is my attempt.

.esri-layer-list__child-toggle + .esri-layer-list__item-label > .esri-layer-list__item-toggle {
 display:none;
}‍‍‍

Selects all

.esri-layer-list__item-label

elements that are placed immediately after

.esri-layer-list__child-toggle

elements = x

Selects all

.esri-layer-list__item-toggle

elements where the parent is a x above.

Here is a sample that hides the eye when it is not a parent element with a radio button:

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

  <title>LayerList widget with actions - 4.10</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    .esri-layer-list__child-toggle + .esri-layer-list__item-label:not([role="radio"]) > .esri-layer-list__item-toggle {
     display:none;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  <script src="https://js.arcgis.com/4.10/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/GroupLayer",
      "esri/layers/MapImageLayer",
      "esri/widgets/LayerList"
    ], function(
      Map, MapView, GroupLayer, MapImageLayer, LayerList
    ) {

      // Create layer showing sample data of the United States.

      var USALayer = new MapImageLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
        title: "US Sample Data"
      });

      // Create layer showing sample census data of the United States.
      // Set visibility to false so it's not visible on startup.

      var censusLayer = new MapImageLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
        title: "US Sample Census",
        visible: false
      });

      // Create GroupLayer with the two MapImageLayers created above
      // as children layers.

      var demographicGroupLayer = new GroupLayer({
        title: "US Demographics",
        visible: true,
        visibilityMode: "exclusive",
        layers: [USALayer, censusLayer],
        opacity: 0.75
      });

      // Create a map and add the group layer to it

      var map = new Map({
        basemap: "dark-gray",
        layers: [demographicGroupLayer]
      });

      // Add the map to a MapView

      var view = new MapView({
        center: [-98.5795, 39.8282],
        zoom: 5,
        container: "viewDiv",
        map: map
      });

      // Creates actions in the LayerList.

      function defineActions(event) {

        // The event object contains an item property.
        // is is a ListItem referencing the associated layer
        // and other properties. You can control the visibility of the
        // item, its title, and actions using this object.

        var item = event.item;

        if (item.title === "US Demographics") {

          // An array of objects defining actions to place in the LayerList.
          // By making this array two-dimensional, you can separate similar
          // actions into separate groups with a breaking line.

          item.actionsSections = [
            [{
              title: "Go to full extent",
              className: "esri-icon-zoom-out-fixed",
              id: "full-extent"
            }, {
              title: "Layer information",
              className: "esri-icon-description",
              id: "information"
            }],
            [{
              title: "Increase opacity",
              className: "esri-icon-up",
              id: "increase-opacity"
            }, {
              title: "Decrease opacity",
              className: "esri-icon-down",
              id: "decrease-opacity"
            }]
          ];
        }
      }

      view.when(function() {

        // Create the LayerList widget with the associated actions
        // and add it to the top-right corner of the view.

        var layerList = new LayerList({
          view: view,
          // executes for each ListItem in the LayerList
          listItemCreatedFunction: defineActions
        });

        // Event listener that fires each time an action is triggered

        layerList.on("trigger-action", function(event) {

          // The layer visible in the view at the time of the trigger.
          var visibleLayer = USALayer.visible ?
            USALayer : censusLayer;

          // Capture the action id.
          var id = event.action.id;

          if (id === "full-extent") {

            // if the full-extent action is triggered then navigate
            // to the full extent of the visible layer
            view.goTo(visibleLayer.fullExtent);

          } else if (id === "information") {

            // if the information action is triggered, then
            // open the item details page of the service layer
            window.open(visibleLayer.url);

          } else if (id === "increase-opacity") {

            // if the increase-opacity action is triggered, then
            // increase the opacity of the GroupLayer by 0.25

            if (demographicGroupLayer.opacity < 1) {
              demographicGroupLayer.opacity += 0.25;
            }
          } else if (id === "decrease-opacity") {

            // if the decrease-opacity action is triggered, then
            // decrease the opacity of the GroupLayer by 0.25

            if (demographicGroupLayer.opacity > 0) {
              demographicGroupLayer.opacity -= 0.25;
            }
          }
        });

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

</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

KellyHutchins — Fri, 11 Jan 2019 17:03:09 GMT

Here's a bit of doc on the css adjacent selector - not much detail but I think the simple example in the doc compare with Robert's detailed answer explains how it works.

Adjacent sibling combinator | MDN

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

JayHill — Mon, 14 Jan 2019 15:00:55 GMT

Great Thanks for helping explain that. Both posts!

topic Re: I'm trying to hide the eyeball icon for grouplayers in the layer list in ArcGIS JavaScript Maps SDK Questions

I'm trying to hide the eyeball icon for grouplayers in the layer list

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list

Re: I'm trying to hide the eyeball icon for grouplayers in the layer list