2

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>
2

Change

 map.addLayer(layer);

to

 map.addLayers([layer]);
  • Hi @RuchiraWelikala, it did put the title and a symbol but then gave this error: TypeError: this.spatialReference is undefined Thanks for your help. – Kenny Jan 13 '14 at 16:27
  • @Kenny Hmm, is this a sporadic error or something that is coming up all the time? Upon googling it, seems that it's kind of random. forums.arcgis.com/threads/… – Ruchira Welikala Jan 13 '14 at 16:42
  • it doesn't appear to be random. Infact, I would not even worry about it if data was showing on legend. Only title is showing but itself is not and I am thinking the error has something to do with it. – Kenny Jan 13 '14 at 16:53
  • I am also wondering if there is something else I needed to modify within the code I posted above. Just to show what is displaying on the legend, please see screenshot above. – Kenny Jan 13 '14 at 17:14
  • 1
    Does your basemap and feature layer both have the same coordinate reference system? It might help if you explicitly defined the SRID in both layers. – Mintx Jan 13 '14 at 19:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.