Label are not working in the Map Viewer

Sai_AnandPeketi1 · ‎08-09-2017

Hello everyone,

I want to display the label in the map viewer for this I turn on labels in map services. I can see the label in the ArcGIS Online of that map services, but I can't see those label in the map viewer. Did I need to add any class or function? Am I need to write the class to visible? I see some sample examples like Labeling features client-side | Guide | ArcGIS API for JavaScript 3.21. But those are not helpful for me. I don't want to set the label name in my script because the client can vary the label field. For info, I'm using ArcGIS basic viewer template that was based on 3.15 API for JS.

Thanks for the help.

RobertScheitlin__GISP · ‎08-09-2017

If you need the user to have the ability to change the label field then this sample will work as a good example:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; text-align: center; }
      .shadow {
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }
      #map{ margin: 0; padding: 0; }
      #feedback {
        background: #fff;
        color: #444;
        font-family: arial;
        left: 30px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        top: 30px;
        width: 300px;
        z-index: 40;
      }
      #loading { visibility: hidden; }
    </style>

    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      // one global for persistent app variables
      var app = {};
      require([
        "esri/map",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",
        "esri/layers/LabelLayer",
        "esri/renderers/SimpleRenderer",
        "esri/request",
        "esri/symbols/TextSymbol",
        "dojo/parser",
        "dojo/json",
        "dojo/dom",
        "dojo/data/ItemFileReadStore",
        "dijit/registry",
        "dojo/_base/array",
        "dojo/dom-style",
        "esri/Color",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/form/FilteringSelect",
        "dojo/domReady!"
      ], function(
        Map,
        ArcGISTiledMapServiceLayer,
        FeatureLayer,
        LabelLayer,
        SimpleRenderer,
        esriRequest,
        TextSymbol,
        parser,
        JSON,
        dom,
        ItemFileReadStore,
        registry,
        arrayUtils,
        domStyle,
        Color
      ) {
        parser.parse();

        app.dataUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2";

        app.map = new Map("map", {
          center: [-86.708254, 33.053200],
          zoom: 8,
          slider: true,
          showLabels: true
        });

        var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
        app.map.addLayer(basemap);

        // add US Counties as a Feature layer
        var usaLayer = new FeatureLayer(app.dataUrl, {
          id: "us_counties",
          opacity: 0.7,
          visible: true
        });
        app.map.addLayer(usaLayer);

        var usaLblLayer = new FeatureLayer(app.dataUrl, {
          id: "us_counties_lbl",
          opacity: 0,
          visible: true,
          outFields: ["*"]
        });
        usaLblLayer.setDefinitionExpression("STATE_NAME = 'Alabama'");
        app.map.addLayer(usaLblLayer);

        // get field info
        var countyFields = esriRequest({
          url: app.dataUrl,
          content: {
            f: "json"
          },
          callbackParamName: "callback"
        });
        countyFields.then(function(resp) {
          var fieldNames, fieldStore;

          fieldNames = { identifier: "value", label: "name", items: [] };
          arrayUtils.forEach(resp.fields.slice(6, 16), function(f) { // add some field names to the FS
            fieldNames.items.push({ "name": f.name, "value": f.name });
          });
          fieldStore = new ItemFileReadStore({ data: fieldNames });
          registry.byId("fieldNames").set("store", fieldStore);
          registry.byId("fieldNames").set("value", "POP2007"); // set a value
        }, function(err) {
          console.log("failed to get field names: ", err);
        });

        // hide the loading icon when the counties layer finishes updating
        usaLayer.on("update-end", function() {
          domStyle.set("loading", "visibility", "hidden");
        });

        // update renderer when field name changes
        registry.byId("fieldNames").on("change", getData);
        registry.byId("fieldNames").set("value", "POP2007"); // triggers getData()

        function getData() {
          var fl = app.map.getLayer("us_counties_lbl");
          fl.visible = true;
          if(app.map.getLayer("labels")){
            app.map.removeLayer(app.map.getLayer("labels"));
          }
          var statesLabel = new TextSymbol().setColor(new Color("#ff0000"));
          statesLabel.font.setSize("14pt");
          statesLabel.font.setFamily("arial");
          var renderer = new SimpleRenderer(statesLabel);
          var labelLayer = new LabelLayer({ id: "labels" });
          labelLayer.addFeatureLayer(fl, renderer, "{" + (registry.byId("fieldNames").get("value") || "POP2000") + "}");
          app.map.addLayer(labelLayer);
        }

        function errorHandler(err) {
          console.log("error: ", JSON.stringify(err));
        }
      });
    </script>
  </head>

  <body class="tundra">
    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">

        <div id="feedback" class="shadow">
          <h3>Change the Attribute Field Used to Label Data</h3>
          <div id="info">
            <!-- filtering select -->
            <label for="fieldNames">Label based on: </label>
            <select id="fieldNames" name="baseSym"
                    data-dojo-type="dijit/form/FilteringSelect"
                    data-dojo-props="style:'width:200px;'">
            </select>
            <img id="loading" src="http://dl.dropbox.com/u/2654618/loading_black.gif" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Sai_AnandPeketi1 · ‎08-10-2017

Thanks for help Robert. But I don't want to set the client side label script.

KellyHutchins · ‎08-09-2017

That is a really old version of the Basic Viewer so it may be that web map labels weren't yet supported. You can download the source code for the latest version of that application here:

GitHub - Esri/Viewer: Viewer is a configurable application template that enables you to display an A...

Sai_AnandPeketi1 · ‎08-10-2017

Thanks for help Kelly Hutchins. I will download the latest version of the map viewer.