Hi community,
I think I need your help 🙂
Using the ArcGIS API for JavaScript 4.13 I have created a web map containing a FeatureLayer.
Now I want to be able to toggle the labels for this layers on and off.
Initially I have set the labelsVisible property to false (Labels invisible :-)). By clicking the labels button in the layerlist once I set this property to true and the labels appear 🙂 With this labels button I can now toggle this property between true and false, but the labels are not removed when the property is set to false...
What should I do to get rid of the labels? See screen capture and full code below to see what I have accomplished up to now.
Any suggestions highly appreciated.
TIA,
Egge-Jan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/css/main.css">
<script src="https://js.arcgis.com/4.13/"></script>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/LayerList",
"esri/widgets/Expand"
], function(Map, Point, MapView, FeatureLayer, LayerList, Expand) {
var map = new Map({
basemap: {
portalItem: {
id: "7aea6fa913a94176a1074edb40690318" // Topo RD
}
}
});
var popupTemplate = { // autocasts as new PopupTemplate()
title: "Provincie",
content: "{Provincienaam}"
};
var renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
style: "none", // The polygon has no fill
outline: { // autocasts as new SimpleLineSymbol()
width: 1.5,
color: "#F5B041" // Hex Color Code
}
}
};
const labelClass = {
// autocasts as new LabelClass()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "green",
haloColor: "black",
font: { // autocast as new Font()
family: "Playfair Display",
size: 12,
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.Provincienaam"
}
};
var nederlandseProvinciesLayer = new FeatureLayer({
url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Provincies_2019/FeatureServer/0",
title: "Provincies (2019)",
popupTemplate: popupTemplate,
renderer: renderer,
labelingInfo: [labelClass],
labelsVisible: false
});
map.add(nederlandseProvinciesLayer);
var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: new Point({x: 155000, y: 463000, spatialReference: 28992}),
zoom: 3
});
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(event) {
if (event.action.id === "labels") {
if (nederlandseProvinciesLayer.labelsVisible == false) {
nederlandseProvinciesLayer.labelsVisible = true;
console.log(nederlandseProvinciesLayer.labelsVisible);
} else {
nederlandseProvinciesLayer.labelsVisible = false;
console.log(nederlandseProvinciesLayer.labelsVisible);
}
}
});
layerListExpand = new Expand({
expandIconClass: "esri-icon-layer-list", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: layerList.label,
view: view,
content: layerList,
expanded: true,
group: "top-right"
});
view.ui.add([layerListExpand], "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
1 Solution
Accepted Solutions
