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.
Solved! Go to Solution.
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>
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>
Thank you so much, was going back and forward that example, but couldn’t make it fit. Now it works, thank you.
Glad to help. Don't forget to click the "Mark Correct" button.