Community

Labeling with javascript

1398
1
08-05-2016 09:54 AM
JeffGodfrey
by
New Contributor II
‎08-05-2016 09:54 AM

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

jeff.godfrey@co.chelan.wa.us

AddLayer2.html.zip
0 Kudos
1 Reply
FC_Basson
by MVP Regular Contributor
MVP Regular Contributor
‎08-08-2016 02:06 AM

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>
0 Kudos