AnsweredAssumed Answered

labels off function

Question asked by wthughes on Jun 3, 2016
Latest reply on Jun 6, 2016 by kenbuja

I added a labelsOff function to the following "labeling features client-site" sample. In the console I get an error saying cannot find variable "labelsOff" which is the name of the function. What am I missing? Thanks.

 

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Labeling features client-side</title>

    <link rel="stylesheet"   href="//js.arcgis.com/3.16/esri/css/esri.css">

    <style>

      html, body, #map {

        height: 100%; width: 100%; margin: 0; padding: 0;

      }

      #btn{

          top:20px; right:20px; position: absolute; z-index:100;

      }

    </style>

 

 

   <script src="//js.arcgis.com/3.16/"></script>

    <script>

      var map;

   

      require([

        "esri/map",

        "esri/geometry/Extent",

        "esri/layers/FeatureLayer",

        "esri/symbols/SimpleLineSymbol",

        "esri/symbols/SimpleFillSymbol",

        "esri/symbols/TextSymbol",

        "esri/renderers/SimpleRenderer",

        "esri/layers/LabelClass",

        "esri/Color",

        

        "dojo/domReady!"

      ], function(Map, Extent, FeatureLayer,

                  SimpleLineSymbol, SimpleFillSymbol,

                  TextSymbol, SimpleRenderer, LabelClass, Color)

      {

        // load the map centered on the United States

        var bbox = new Extent({"xmin": -1940058, "ymin": -814715, "xmax": 1683105, "ymax": 1446096, "spatialReference": {"wkid": 102003}});

     

        //create the map and set the extent, making sure to "showLabels"

        map = new Map("map", {

          extent: bbox,

          showLabels : true //very important that this must be set to true!  

        });

         

        // create a renderer for the states layer to override default symbology

        var statesColor = new Color("#666");

        var statesLine = new SimpleLineSymbol("solid", statesColor, 1.5);

        var statesSymbol = new SimpleFillSymbol("solid", statesLine, null);

        var statesRenderer = new SimpleRenderer(statesSymbol);

        

        // create the feature layer to render and label

        var statesUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";

        var states = new FeatureLayer(statesUrl, {

          id: "states",

          outFields: ["*"]

        });

        states.setRenderer(statesRenderer);

         

        // create a text symbol to define the style of labels

        var statesLabel = new TextSymbol().setColor(statesColor);

        statesLabel.font.setSize("14pt");

        statesLabel.font.setFamily("arial");

 

 

        //this is the very least of what should be set within the JSON 

        var json = {

          "labelExpressionInfo": {"value": "{STATE_NAME}"}

        };

 

 

        //create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)

        var labelClass = new LabelClass(json);

        labelClass.symbol = statesLabel; // symbol also can be set in LabelClass' json

        states.setLabelingInfo([ labelClass ]);

        map.addLayer(states);

       

        function labelsOff() {

          var optionsArray = []; 

          var drawingOptions = new esri.layers.LayerDrawingOptions(); 

          drawingOptions.showLabels = false; 

          //drawingOptions.renderer = renderer; 

          optionsArray[0] = drawingOptions; 

          states.setLayerDrawingOptions(optionsArray); 

          map.addLayer(states); 

        }

      });

    </script>

  </head>

  <body>

    <div id="map"></div>

    <input type="button" id="btn" value="Labels Off" onClick="labelsOff()"/>

  </body>

</html>

 

                                          
   
  

Outcomes