Problem with ArcGIS JavaScript API: labelling a feature layer

RichardMacNeill1 · ‎02-22-2016

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>

    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>

TyroneBiggums · ‎02-23-2016

This line of code:

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

... is expecting an '=' in your URL. For starters, just to be sure, does your URL have values with an '=' in it?

Try F12 developer tools and see if any errors/warnings pop up in the console.

RichardMacNeill1 · ‎02-23-2016

Thanks Tyrone

My apologies for not supplying more info on the context. The call has the structure: http:<server reference and javascript>?extent=<minx, miny,maxx,maxy>&mapOnly=true. This part seems to work. I've received valuable advice on programming basics, but am also beginning to think that Internet Explorer may also be causing some problems. Using Chrome gives variant results.

RobertScheitlin__GISP · ‎02-23-2016

Richard,

Some things you need to get out of the habit of and into the habit of right away:

Do not use esri.geometry.Polygon. This is what is considered legacy style coding.

Do use the AMD style coding of the objects by adding the require for "esri/geometry/Polygon".

You had "esri/geometry/extent" in your requires and that returns a error as the is no extent.js in the esri geometry library. Extent (notice upper case of E).

You were missing some vars for the requires you had.

Notice in my code line 25 of my requires have the same number of objects as line 32 of my subsequent vars for those requires. This helps me to be sure that my vars match my requires.

<!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>
    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, GraphicsLayer, Scalebar, LabelLayer,
        TextSymbol, Font, LabelClass, parser, 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 SpatialReference({
          wkid: 4326
        });
        var startExtent = new 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 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>

RichardMacNeill1 · ‎02-23-2016

Thanks Robert (again). Valuable advice I'll endeavour to follow.

I'm finding that the behaviour of my script in Internet Explorer differs from Chrome. Are there specific requirements for each and, if so, is there a way of ensuring a capability for both?

RobertScheitlin__GISP · ‎02-23-2016

Richard,

Which version of IE are you targeting? Because you have this meta tag in your code:

Normally you would want to use:

RichardMacNeill1 · ‎02-23-2016

Unofficial

Robert

I'm using IE10. I'll use your suggested code and am about to see how best to make use of its Developers tool.

Richard