[GIS] Get data to display on the map legend

ajaxarcgis-javascript-apidojolegendwidget

I am trying to use the Legend widget from this link below to build a legend that displays our layers in the map:

https://developers.arcgis.com/en/javascript/home.html
I have added the legend widget but it is blank.

Any ideas what I am missing?

enter image description here

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, user-scalable=no">
    <title>Juniver County Business Licenses</title> 
    <link rel="stylesheet" href="//js.arcgis.com/3.8/js/dojo/dijit/themes/tundra/caro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    #leftPane {
      width: 15%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
      #loading {
        width:100%;
        position:absolute;
        height:400px;
         z-index:100;
      }
      #histogram-container text, #histogram-range,
      #scale-bar-left text, #scale-bar-right text {
        font-family: sans-serif;
      }
      #histogram-timeslider-dijit #focusTip {
        font-family: sans-serif;
      }
    </style>

    <script src="//js.arcgis.com/3.8/"></script>
  <script>
  var map;

  require([
    "esri/map", "esri/InfoTemplate",
    "esri/layers/FeatureLayer", "esri/dijit/Legend",
    "dojo/_base/array", "esri/dijit/HistogramTimeSlider",
    "dojo/parser", "dojo/dom-construct",
    "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
    "dojo/domReady!"
  ], function(
    Map, InfoTemplate,
    FeatureLayer,  Legend,
    arrayUtils, HistogramTimeSlider,
    parser, domConstruct
  ) {
      parser.parse();

      map = new Map("mapDiv", {
       //basemap: "streets",
        center: [-74.42, 38.35]
        //zoom: 20
      });

      myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer ("http://gisapps/ArcGIS10/rest/services/GainsStreetBaseMap/MapServer");
      map.addLayer(myTiledMapServiceLayer);

          // feature service with U2 concerts from 1980 - 2013
          var featuresUrl = "http://gisapps/ArcGIS10/rest/services/NewBusinessLicenses/FeatureServer/0";
          var layer = new FeatureLayer(featuresUrl, {
            id: "DUY8db27fc4cfa74a9441",
            infoTemplate: new InfoTemplate(
              "Juniver County Business Licenses",
              "Date:  ${TxPyrStart:DateFormat(selector: 'date', fullYear: true)}<br>" +
              "Name:  ${TxPyrName}<br>" +
              "Address:  ${PhysAddr1}<br>" +
              "City: ${PhysCity}<br>" +
              "State: ${PhysState}<br>" +
              "ZipCode: ${PhysZip}<br>" +
              "NAIC Description: ${NAICDesc}"
            ),
             //infoTemplate: new InfoTemplate("title", "description"),
            mode: FeatureLayer.MODE_SNAPSHOT, // SNAPSHOT required for the histogram time slider
            outFields: ["*"]
          });
         //add the legend
        map.on("layers-add-result", function (evt) {
        var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
          return {layer:layer.layer, title:layer.layer.name};
        });
        if (layerInfo.length > 0) {
          var legendDijit = new Legend({
            map: map,
            layerInfos: layerInfo
          }, "legendDiv");
          legendDijit.startup();
        }
      });
          var layerUpdateEnd = layer.on("update-end", function() {
            layerUpdateEnd.remove();

            var sliderElem = domConstruct.create("div", {
              id: "timeSlider_"+ map.id,
              style: "margin-bottom:10px; bottom:33px"
            }, "bottom-div");
            var sliderParams = {
              // format the dates as mm/dd/yyyy
              // more formatting options:  https://developers.arcgis.com/en/javascript/
              dateFormat: "DateFormat(selector: 'date', fullYear: true)",
              layers : [ layer ],
              mode: "show_all",
              timeInterval: "esriTimeUnitsMonths"
            };
            var slider = new HistogramTimeSlider(sliderParams, sliderElem);
            map.setTimeSlider(slider);
            domConstruct.destroy("loading");
          });

          map.addLayer(layer);
        }
      );
    </script>
  </head>
  <body class="tundra">
    <div class="demoLayout" style="height: 100%; width: 100%"
         data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design: 'headline'">


  <div id="leftPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'left'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
    </div>
  </div>

        <div class="centerPanel"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region: 'center'">

          <div id="mapDiv"
            data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region:'center'">

            <div id="loading"></div>
          </div>
        </div>
        <div class="edgePanel" id="bottom-div" style="height:145px; overflow:hidden"
             data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props="region: 'bottom'">
        </div>
    </div>
  </body>
</html>

Best Answer

Change 

 map.addLayer(layer);

to

 map.addLayers([layer]);
Related Question