I am having trouble labeling a feature layer using javascript. I followed the documentation on LabelLayer from here, LabelLayer | API Reference | ArcGIS API for JavaScript 3.17
Attached is my code. It is pretty simple. It adds to feature layers and is suppose to label one of them.
I am new to javascript and any pointers would be appreciated.
Thank you
Jeff Godfrey
Here you go:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>FeatureLayer</title> <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css"> <script src="https://js.arcgis.com/3.17/"></script> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/map", "esri/layers/FeatureLayer", "esri/layers/LabelLayer", "esri/layers/LabelClass", "esri/symbols/TextSymbol", "esri/symbols/Font", "esri/Color", "dojo/domReady!" ], function( Map, FeatureLayer, LabelLayer, LabelClass, TextSymbol, Font, Color ) { map = new Map("map", { basemap: "hybrid", center: [-120.33, 47.43], zoom: 16, showLabels : true // important! }); //Add feature layer, first layer listed will be on the bottom...last layer listed will be on top. //another feature layer var roads = new FeatureLayer("https://atlas2013.co.chelan.wa.us/arcgis/rest/services/GIS/roads/MapServer/0",{ showLabels : false }); map.addLayer(roads); //another feature layer with labels zoning = new FeatureLayer("https://atlas2013.co.chelan.wa.us/arcgis/rest/services/ChelanCountyGIS/MapServer/20", { id: "Zoning", outFields: ["*"], opacity: 0.7, showLabels : true }); //label settings var zoningLabels = new TextSymbol(); var json = { "labelExpressionInfo": { "value": "{Zoning}" } }; //instance of labelClass var lc = new LabelClass(json); lc.symbol = new TextSymbol({ font: new Font("12", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Helvetica"), color: new Color("#000") }); zoning.setLabelingInfo([lc]); map.addLayer(zoning); }); </script> </head> <body> <div id="map"></div> </body> </html>