labels off function

WillHughes1 · ‎06-03-2016

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="https://community.esri.com//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>

<!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="https://community.esri.com//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>

WillHughes1 · ‎06-03-2016

Here is a solution that works.

<!DOCTYPE html>

<html>

<head>

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

<style>

html, body, #map {

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

}

#btnOff{

top:40px; right:60px; position: absolute; z-index:100;

}

#btnOn{

top:70px; right:60px; position: absolute; z-index:100;

}

</style>

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/dom",

"dojo/on",

"dojo/domReady!"

], function(Map, Extent, FeatureLayer,

SimpleLineSymbol, SimpleFillSymbol,

TextSymbol, SimpleRenderer, LabelClass, Color, dom, on)

{

// 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 json = {

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

};

//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 labelsOn() {

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);

}

on(dom.byId("btnOff"), "click", function(){

labelsOff();

});

on(dom.byId("btnOn"), "click", function(){

labelsOn();

});

</script>

</head>

<body>

</body>

</html>

View solution in original post

WillHughes1 · ‎06-03-2016

Here is a solution that works.

<!DOCTYPE html>

<html>

<head>

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

<style>

html, body, #map {

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

}

#btnOff{

top:40px; right:60px; position: absolute; z-index:100;

}

#btnOn{

top:70px; right:60px; position: absolute; z-index:100;

}

</style>

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/dom",

"dojo/on",

"dojo/domReady!"

], function(Map, Extent, FeatureLayer,

SimpleLineSymbol, SimpleFillSymbol,

TextSymbol, SimpleRenderer, LabelClass, Color, dom, on)

{

// 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 json = {

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

};

//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 labelsOn() {

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);

}

on(dom.byId("btnOff"), "click", function(){

labelsOff();

});

on(dom.byId("btnOn"), "click", function(){

labelsOn();

});

</script>

</head>

<body>

</body>

</html>

AdrianWelsh · ‎06-06-2016

Will,

What did you do differently to make this work?

KenBuja · ‎06-06-2016

He originally had the click event for the button in the html code.

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

Since the labelsOff function was inside the require block, it wasn't accessible. By getting the dom item and listening for the click event inside the block, clicking the button now works

on(dom.byId("btnOff"), "click", function(){ 
    labelsOff(); 
});