AnsweredAssumed Answered

ArcGIS JavaScript: Toggle Labels On and Off?

Question asked by EPolle_TensingInternational 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.

 

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>

Outcomes