AnsweredAssumed Answered

ArcGIS JavaScript: Toggle Labels On and Off?

Question asked by EPolle_TensingInternational Champion on Nov 27, 2019
Latest reply on Nov 27, 2019 by EPolle_TensingInternational

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.






<!DOCTYPE html>
  <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>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;

  <link rel="stylesheet" href="">
  <script src=""></script>

      ], 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: "",
        title: "Provincies (2019)",
        popupTemplate: popupTemplate,
        renderer: renderer,
        labelingInfo: [labelClass],
        labelsVisible: false


       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 ( === "labels") {
          if (nederlandseProvinciesLayer.labelsVisible  == false) {
            nederlandseProvinciesLayer.labelsVisible  = true;
          } else {
            nederlandseProvinciesLayer.labelsVisible  = false;

      layerListExpand = new Expand({
        expandIconClass: "esri-icon-layer-list",  // see
        expandTooltip: layerList.label,
        view: view,
        content: layerList,
        expanded: true,
        group: "top-right"

      view.ui.add([layerListExpand], "top-right");

  <div id="viewDiv"></div>