Displaying labels for MapServer layer

SagesNetworks — Sat, 11 Dec 2021 11:59:05 GMT

Hello,

We are trying to display a layer on a map using a LayerList Widget via the 3.25 version of the API. We have been able to successfully display the layer itself in the widget and on the map but are having trouble with being able to show labels for the layer. We see in the list of fields that the field name "PIN" exists but all our efforts to get the labels to display are coming up short. Our code is below. Any help will be much appreciated.

<!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>Parcel Details</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">

    <style>
        html, body, .container, #map {
          height:100%;
          width:100%;
          margin:0;
          padding:0;
          margin:0;
          font-family: "Open Sans";
      }
      #map {
          padding:0;
      }
      #layerListPane{
          width:25%;
      }
      .esriLayer{
        background-color: #fff;
      }
      .esriLayerList .esriList{
          border-top:none;
      }
      .esriLayerList .esriTitle {
        background-color: #fff;
        border-bottom:none;
      }
      .esriLayerList .esriList ul{
        background-color: #fff;
      }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="https://js.arcgis.com/3.25/"></script>
    <script>
        require([
            "esri/map",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/dijit/LayerList",
			      "esri/urlUtils",
			      "esri/layers/LabelClass",
			      "esri/layers/LayerDrawingOptions",
			      "esri/symbols/TextSymbol",
            "dojo/domReady!"
        ], function (
            Map,
            ArcGISDynamicMapServiceLayer,
            LayerList,
			      urlUtils,
			      LabelClass,
			      LayerDrawingOptions,
			      TextSymbol
        ) {
		
		    urlUtils.addProxyRule({
			  urlPrefix: "www.gis.bocc.co.st-johns.fl.us",
			  proxyUrl: "<The URL to our ESRI Proxy Server comes here>"
		    });

            //Create a map based on an ArcGIS Online web map id
            var map = new Map("map", {
                basemap: "topo",
                center: [-81.312431, 29.901243], // long, lat
                zoom: 17,
                sliderStyle: "small",
				        showLabels : true
            });
                     
           map.on("load", function(){
                 var point = new esri.geometry.Point({ 'x': -81.312431, 'y': 29.901243, 'spatialReference': { 'wkid': 4326 } });
                 var infoSymbol =  
                   new esri.symbol.PictureMarkerSymbol({
                          'angle':0,
                          'xoffset':0,
                          'yoffset':12,
                          'type':'esriPMS',
                          'url':'https://static.arcgis.com/images/Symbols/Basic/YellowStickpin.png',
                          'contentType':'image/png',
                          'width':24,
                          'height':24});

                 map.graphics.add(new esri.Graphic(point,infoSymbol));
           });

			     var stJohnsCountyParcelLayer = new ArcGISDynamicMapServiceLayer("http://www.gis.bocc.co.st-johns.fl.us/sjcgis/rest/services/Parcel/MapServer", {
                "id": "stJohnsCountyParcelLayer",
                "showAttribution": false,
				        "showLabels": true
            });

			      // =========================
			
      			var optionsArray = [];
      			var drawingOptions = new LayerDrawingOptions();
      			var labelClass = new LabelClass({
      				labelExpression: '[' + "PIN" + ']',
      				labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
      				symbol: new TextSymbol()
      			});
      
      			drawingOptions.labelingInfo = [labelClass];
      			drawingOptions.showLabels = true;
      
      			optionsArray[0] = drawingOptions;
      			stJohnsCountyParcelLayer.setLayerDrawingOptions(optionsArray);
      			stJohnsCountyParcelLayer.show();

			      // ==================================================
			
            map.addLayer(stJohnsCountyParcelLayer);
            
            var myWidget = new LayerList({
                map: map,
                layers: [{
                    layer: stJohnsCountyParcelLayer,
                    id: "St. Johns County Parcels",
                    showSubLayers: true
                  }]
            }, "layerList");
        });
    </script>
</head>
<body class="claro">
    <div class="container" data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false">
        <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
            <div id="layerList"></div>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
    </div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks.

topic Displaying labels for MapServer layer in ArcGIS JavaScript Maps SDK Questions

Displaying labels for MapServer layer