labels off function

2820
3
Jump to solution
06-03-2016 06:14 PM
WillHughes1
Occasional Contributor II

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>

0 Kudos
1 Solution

Accepted Solutions
WillHughes1
Occasional Contributor II

Here is a solution that works.

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

      }

      #btnOff{

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

      }

        #btnOn{

          top:70px; right:60px; 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/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>

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

    <input type="button" id="btnOff" value="Labels Off" />

      <input type="button" id="btnOn" value="Labels On" />

  </body>

</html>

View solution in original post

3 Replies
WillHughes1
Occasional Contributor II

Here is a solution that works.

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

      }

      #btnOff{

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

      }

        #btnOn{

          top:70px; right:60px; 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/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>

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

    <input type="button" id="btnOff" value="Labels Off" />

      <input type="button" id="btnOn" value="Labels On" />

  </body>

</html>

View solution in original post

AdrianWelsh
MVP Notable Contributor

Will,

What did you do differently to make this work?

0 Kudos
KenBuja
MVP Honored Contributor

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

});