AnsweredAssumed Answered

Problem with ArcGIS JavaScript API: labelling a feature layer

Question asked by RichardNNTT on Feb 22, 2016
Latest reply on Feb 23, 2016 by RichardNNTT

Below is script intended to label the axes of a grid. But first, I need to have the label displayed. The labels are not displaying. Can anyone out there suggest what I may be doing wrong?

(My apologies for the repeated requests for help. I'm learning as I go and, until I take a JavaScript course, it will be 2 steps forward and one back).

The script takes a set of coordinates in the URL and displays a box. It then displays a feature layer grid with fields containing latitude and longitude values for each grid line. To overcome one problem at a time, I have replaced the field name in the json expression with a constant text value.

 

<!DOCTYPE html>
<html>
  <head>
   <title>Bounding Box</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
   <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<style>
  html, body, #mapDiv{padding: 0;margin: 0;height: 100%;}
</style>
<script src="https://js.arcgis.com/3.15/"></script>
<script type="text/javascript" src="dojo/dojo.js"
    data-dojo-config="parseOnLoad: true"></script>

<script>
var URLExtent = this.location.href.split("=")[1].split("&")[0].split(",");

require(["esri/map","esri/layers/FeatureLayer","esri/geometry/extent","esri/SpatialReference","esri/geometry/Polygon","esri/graphic","esri/symbols/SimpleFillSymbol"
,"esri/symbols/SimpleLineSymbol","esri/Color","esri/layers/GraphicsLayer","esri/dijit/Scalebar",
"esri/layers/LabelLayer",
"esri/symbols/TextSymbol",
"esri/symbols/Font",
"esri/layers/LabelClass",
"dojo/parser","dojo/on","dojo/domReady!"],
function(Map,FeatureLayer,extent,SpatialReference,Polygon,Graphic,SimpleFillSymbol,SimpleLineSymbol,Color,
LabelLayer,
TextSymbol,
Font,
LabelClass,
parser,Scalebar,on) {
var arrayOfCoordinates = [[URLExtent[0],URLExtent[1]],[URLExtent[2],URLExtent[1]],[URLExtent[2],URLExtent[3]],[URLExtent[0],URLExtent[3]],[URLExtent[0],URLExtent[1]]];
var spatialRef = new esri.SpatialReference({wkid:4326});
var startExtent = new esri.geometry.Extent(URLExtent[0],URLExtent[1],URLExtent[2],URLExtent[3]);
startExtent.spatialReference = spatialRef;

    map = new Map("mapDiv", {
      basemap: "streets",
   extent: startExtent,
   showLabels : true
    });

var box = new esri.geometry.Polygon(arrayOfCoordinates);
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
   new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
   new Color([255,0,0]), 2),new Color([255,255,255,0.25])
);
var lsymbol = new TextSymbol(new Color([255,0,0]),new Font("14pt",Font.STYLE_ITALIC,Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"Arial"));
var json = {
"labelExpressionInfo": {"value": "longitude"}
};
var lc = new LabelClass(json);
lc.symbol = lsymbol;
var featureLayer = new FeatureLayer("http://services2.arcgis.com/rzk7fNEt0xoEp3cX/arcgis/rest/services/graticule_GDA94/FeatureServer/0",{
  id: "grat",
  //labelingInfo: [lc],
  showLabels: true,
  outFields: ["*"]
});
map.on("load",function(){
  var graphic = new Graphic(box,sfs);
  map.graphics.add(graphic);
  map.setZoom(map.getZoom()-1);
  featureLayer.setLabelingInfo([lc]);
  map.addLayer(featureLayer);
});
}); 
</script>
  </head>
 
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

Outcomes