Hide Table of Contents
Latest Samples
View Labeling features on the client sample in sandbox
Labeling features on the client

Description

This sample demonstrates labeling via thefeatureLayer.setLabelingInfo()method. When doing this, theMap's showLabelsconstructor option should always be set when labeling since most of the labeling parameters are taken directly from the feature layer. It is also possible to set the format parameters, symbols, date, etc. using theLabelClass(). The sample below shows the bare minimum of setting the labelExpressionInfo to a specific field value, "STATE_NAME".


Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Labeling features client-side</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
    </style>

   <script src="https://js.arcgis.com/3.26/"></script>
    <script>
      var map;
    
      require([
        "esri/map", 
        "esri/geometry/Extent",
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/TextSymbol",
        "esri/renderers/SimpleRenderer",
        "esri/layers/LabelClass",
        "esri/Color",
         
        "dojo/domReady!"
      ], function(Map, Extent, FeatureLayer,
                  SimpleLineSymbol, SimpleFillSymbol, 
                  TextSymbol, SimpleRenderer, LabelClass, Color) 
      {
        // load the map centered on the United States
        var bbox = new Extent({"xmin": -1940058, "ymin": -814715, "xmax": 1683105, "ymax": 1446096, "spatialReference": {"wkid": 102003}});
      
        //create the map and set the extent, making sure to "showLabels"
        map = new Map("map", {
          extent: bbox,
          showLabels : true //very important that this must be set to true!   
        });

        // create a renderer for the states layer to override default symbology
        var statesColor = new Color("#666");
        var statesLine = new SimpleLineSymbol("solid", statesColor, 1.5);
        var statesSymbol = new SimpleFillSymbol("solid", statesLine, null);
        var statesRenderer = new SimpleRenderer(statesSymbol);
         
        // create the feature layer to render and label
        var statesUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";
        var states = new FeatureLayer(statesUrl, {
          id: "states",
          outFields: ["*"]
        });
        states.setRenderer(statesRenderer);


        // create a text symbol to define the style of labels
        var statesLabel = new TextSymbol().setColor(statesColor);
        statesLabel.font.setSize("14pt");
        statesLabel.font.setFamily("arial");

        //this is the very least of what should be set within the JSON  
        var json = {
          "labelExpressionInfo": {"value": "{STATE_NAME}"}
        };

        //create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)
        var labelClass = new LabelClass(json);
        labelClass.symbol = statesLabel; // symbol also can be set in LabelClass' json
        states.setLabelingInfo([ labelClass ]);
        map.addLayer(states);
    
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
 
          
Show Modal