Hi all,
I'm working on creating multiple layerlists so that each layer has it's own. The multiple layerlists are functional and work fine, the problem I'm running into now is that the the label visibility feature doesn't seem to be working properly.
Can anyone point me in the right direction on how to make this code work? I have several more layers I want to add to this web app but I figured starting small and slowly scaling was the best approach @ChristianBischof @RobertScheitlin__GISP
<!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.22</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.22/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.12/"></script>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/LayerList",
"esri/widgets/Expand",
"dojo/query",
"esri/core/watchUtils",
"dojo/dom-style"
], function (Map, Point, MapView, FeatureLayer, LayerList, Expand, query, watchUtils, domStyle) {
const watershedLabel = ({
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "white",
font: { // autocast as new Font()
family: "Playfair Display",
size: 12,
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.HRNAME"
},
deconflictionStrategy: "none"
});
const waterRend = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [0, 200, 200, 0.3],
outline: { // autocasts as new SimpleLineSymbol()
width: 0.5,
color: "black"
}
}
};
const watersheds = new FeatureLayer({
url: "https://gis.sccwrp.org/arcserver/rest/services/Hosted/California_Watersheds/FeatureServer",
renderer: waterRend,
title: "Watersheds",
labelingInfo: watershedLabel
});
const rwqcbLabel = ({
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "white",
font: { // autocast as new Font()
family: "Playfair Display",
size: 12,
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.RBNAME"
},
deconflictionStrategy: "none"
});
const rwqcbRend = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [0, 76, 115, 0.1],
outline: { // autocasts as new SimpleLineSymbol()
width: 2,
color: "brown"
}
}
};
const rwqcb = new FeatureLayer({
url: "https://gis.sccwrp.org/arcserver/rest/services/Hosted/Regional_Water_Quality_Control_Boards/FeatureServer", // Taken from sccwrp ArcOnline account
title: "Regional Water Quality Control Boards", // naming layer as it'll be seen on the legend + layerlist dropdown menu
renderer: rwqcbRend,
labelingInfo: rwqcbLabel
});
// Setting up map
const map = new Map({
basemap: "satellite",
layers: [watersheds, rwqcb]
});
var view = new MapView({ // take that new map we just made above and display it
container: "viewDiv",
center: [-118.243683, 36.052235],
zoom: 6,
map: map,
popup: {
autoOpenEnabled: false,
dockEnabled: true,
dockOptions: {
// dock popup at bottom-right side of view
buttonEnabled: true,
breakpoint: false,
position: "bottom-right"
}
}
});
// Multiple layerlist function
view.when(function () {
// New Layerlist (dropdown)
// Visble layer function
// Add widget to the top right corner of the view
//workaround for making sure layerlist is ready
var layerList = new LayerList({
view: view,
listItemCreatedFunction: function (event) {
const item = event.item;
item.actionsSections = [
[
{
title: "Labels",
className: "esri-icon-labels",
id: "labels"
}
]
];
}
});
layerList.on("trigger-action", function (rwqcbevent) {
if (rwqcbevent.action.id === "labels") {
if (rwqcb.labelsVisible == false) {
rwqcb.labelsVisible = true;
console.log(rwqcb.labelsVisible);
} else {
rwqcb.labelsVisible = false;
console.log(rwqcb.labelsVisible);
}
}
});
watchUtils.when(layerList, 'operationalItems.length', function () {
var lis = query('li[aria-labelledby $= "__title"]', layerList.domNode);
lis.map(function (li) {
if (li.innerText === "Regional Water Quality Control Boards") {
domStyle.set(li, "display", "none");
}
});
});
view.ui.add(layerList, "top-right");
// New Layerlist (dropdown)
// Visble layer function
// Add widget to the top right corner of the view
//workaround for making sure layerlist is ready
var layerList2 = new LayerList({
view: view,
listItemCreatedFunction: function (event) {
const item = event.item;
item.actionsSections = [
[
{
title: "Labels",
className: "esri-icon-labels",
id: "labels2"
}
]
];
}
});
layerList2.on("trigger-action", function (watershedevent) {
if (watershedevent.action.id === "labels2") {
if (watersheds.labelsVisible == false) {
watersheds.labelsVisible = true;
console.log(watersheds.labelsVisible);
} else {
watersheds.labelsVisible = false;
console.log(watersheds.labelsVisible);
}
}
});
watchUtils.when(layerList2, 'operationalItems.length', function () {
var lis = query('li[aria-labelledby $= "__title"]', layerList2.domNode);
lis.map(function (li) {
if (li.innerText === "Watersheds") {
domStyle.set(li, "display", "none");
}
});
});
view.ui.add(layerList2, "top-right");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
