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?
Solved! Go to Solution.
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;
}
Jay,
So you are trying to hide the eye icon for one specific group layer or all group layers?
all group layers
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;
}
Yes Kelly! That was it! Thanks
Can you explain the adjacent selection though?
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>
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.
Great Thanks for helping explain that. Both posts!