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

1560
7
Jump to solution
01-10-2019 10:08 AM
JayHill
Occasional Contributor II

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?

1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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;
}

View solution in original post

7 Replies
RobertScheitlin__GISP
MVP Emeritus

Jay,

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

0 Kudos
JayHill
Occasional Contributor II

all group layers

0 Kudos
KellyHutchins
Esri Frequent Contributor

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;
}
JayHill
Occasional Contributor II

Yes Kelly! That was it! Thanks

Can you explain the adjacent selection though?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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>
KellyHutchins
Esri Frequent Contributor

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 

0 Kudos
JayHill
Occasional Contributor II

Great Thanks for helping explain that.  Both posts!

0 Kudos