If you need the user to have the ability to change the label field then this sample will work as a good example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; text-align: center; }
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#map{ margin: 0; padding: 0; }
#feedback {
background: #fff;
color: #444;
font-family: arial;
left: 30px;
margin: 5px;
padding: 10px;
position: absolute;
top: 30px;
width: 300px;
z-index: 40;
}
#loading { visibility: hidden; }
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
var app = {};
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/LabelLayer",
"esri/renderers/SimpleRenderer",
"esri/request",
"esri/symbols/TextSymbol",
"dojo/parser",
"dojo/json",
"dojo/dom",
"dojo/data/ItemFileReadStore",
"dijit/registry",
"dojo/_base/array",
"dojo/dom-style",
"esri/Color",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/FilteringSelect",
"dojo/domReady!"
], function(
Map,
ArcGISTiledMapServiceLayer,
FeatureLayer,
LabelLayer,
SimpleRenderer,
esriRequest,
TextSymbol,
parser,
JSON,
dom,
ItemFileReadStore,
registry,
arrayUtils,
domStyle,
Color
) {
parser.parse();
app.dataUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2";
app.map = new Map("map", {
center: [-86.708254, 33.053200],
zoom: 8,
slider: true,
showLabels: true
});
var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
app.map.addLayer(basemap);
var usaLayer = new FeatureLayer(app.dataUrl, {
id: "us_counties",
opacity: 0.7,
visible: true
});
app.map.addLayer(usaLayer);
var usaLblLayer = new FeatureLayer(app.dataUrl, {
id: "us_counties_lbl",
opacity: 0,
visible: true,
outFields: ["*"]
});
usaLblLayer.setDefinitionExpression("STATE_NAME = 'Alabama'");
app.map.addLayer(usaLblLayer);
var countyFields = esriRequest({
url: app.dataUrl,
content: {
f: "json"
},
callbackParamName: "callback"
});
countyFields.then(function(resp) {
var fieldNames, fieldStore;
fieldNames = { identifier: "value", label: "name", items: [] };
arrayUtils.forEach(resp.fields.slice(6, 16), function(f) {
fieldNames.items.push({ "name": f.name, "value": f.name });
});
fieldStore = new ItemFileReadStore({ data: fieldNames });
registry.byId("fieldNames").set("store", fieldStore);
registry.byId("fieldNames").set("value", "POP2007");
}, function(err) {
console.log("failed to get field names: ", err);
});
usaLayer.on("update-end", function() {
domStyle.set("loading", "visibility", "hidden");
});
registry.byId("fieldNames").on("change", getData);
registry.byId("fieldNames").set("value", "POP2007");
function getData() {
var fl = app.map.getLayer("us_counties_lbl");
fl.visible = true;
if(app.map.getLayer("labels")){
app.map.removeLayer(app.map.getLayer("labels"));
}
var statesLabel = new TextSymbol().setColor(new Color("#ff0000"));
statesLabel.font.setSize("14pt");
statesLabel.font.setFamily("arial");
var renderer = new SimpleRenderer(statesLabel);
var labelLayer = new LabelLayer({ id: "labels" });
labelLayer.addFeatureLayer(fl, renderer, "{" + (registry.byId("fieldNames").get("value") || "POP2000") + "}");
app.map.addLayer(labelLayer);
}
function errorHandler(err) {
console.log("error: ", JSON.stringify(err));
}
});
</script>
</head>
<body class="tundra">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
<div id="feedback" class="shadow">
<h3>Change the Attribute Field Used to Label Data</h3>
<div id="info">
<!-- filtering select -->
<label for="fieldNames">Label based on: </label>
<select id="fieldNames" name="baseSym"
data-dojo-type="dijit/form/FilteringSelect"
data-dojo-props="style:'width:200px;'">
</select>
<img id="loading" src="http://dl.dropbox.com/u/2654618/loading_black.gif" />
</div>
</div>
</div>
</div>
</body>
</html>