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>
Solved! Go to Solution.
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>
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>
Will,
What did you do differently to make this work?
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(); });