How to add legend to dom element in widget

[FranklinAlexander]

I have done this before without issue, but for some reason I cannot get my legend to show up in a div element I created in a widget panel. I have looked a all of the esri documentation to try and figure out what's wrong and cannot find anything, so I need some help to figure out what I am missing. I have a custom widget and I just want to show the bathymetry symbols in a legend for a bathymetry layer. Here is my code:

const bathLayer = new FeatureLayer(bathyUrl, {
      id: "Lakes Bathymetry",
      infoTemplate: depthInfo,
      outFields: ["*"]
});

this.map.addLayer(bathLayer);

this.own(bathLayer.on('load', lang.hitch(this, function(evt) {
      this._createLegend(bathLayer);
      map.setExtent(window.initExt);
      loading.style.display = "none";
})));

_createLegend: function(layer) {
      var legendParams = {
            arrangement: 0,
            autoUpdate: true,
            map: map,
            layerInfos: {
              layer: layer,
              title: "Lakes Bathymetry"
            }
       };
       var legend = new Legend(legendParams, this.legendDiv);
       console.log("legend', legend);  ///only 1 childNode, no legend node
       legend.startup();       
},
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<div id="legend-div" data-dojo-attach-point="legendDiv" style="margin-top:5px; display:block; height:250px; width:100%;"></div>‍

I thought maybe it was a css issue, but I made sure the div element is set to display: block with height and width set, so that's not the issue. For some reason the legend isn't loading. I should be seeing two child nodes after logging out the legend, but I am only seeing the 'legend-div_msg' node. 

The only thing I can think of is that it is a timing/async issue, but I was under the impression that the legend used the layer render to set the legend symbols and if that's the case, the renderer exists since it is being access from the url and so the legend should have access to the symbols. Everything seems to be in order here:

I have a feeling I am missing something very obvious, just can't seem to see it. 

Thanks!!

[FranklinAlexander]

Yes, I saw that too, but I also found this

Legend | API Reference | ArcGIS API for JavaScript 3.33  where feature layer is also listed. 

I got the legend to work, I just have to figure out how to only show for 1 layer. I know there is a way, but if all else fails I will just set the unwanted legend div to display:none! 🙂

[RobertScheitlin__GISP]

Add your layer as an ArcGISDynamicMapServiceLayer and then use the hideLayers property of the legends LayerInfos object.

[FranklinAlexander]

Ok, I will look into that tomorrow, but I have about 14 layers in that map service and two other widgets that pull data from the same service. That may be a lot of rewriting of code which I don't want to do for one legend. I think I am close to a solution, but will let you know what I come up with. Thanks, you got me on the right track!

Gene

[RobertScheitlin__GISP · Accepted solution]

Gene, 

Sorry I just noticed the issue in the code. LayerInfos is expecting an array not a single object.

_createLegend: function(layer) {
      var legendParams = {
            arrangement: 0,
            autoUpdate: true,
            map: map,
            layerInfos: [{
              layer: layer,
              title: "Lakes Bathymetry"
            }]
       };
       var legend = new Legend(legendParams, this.legendDiv);
       console.log("legend', legend);  ///only 1 childNode, no legend node
       legend.startup();       
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[FranklinAlexander]

That fixed it! I completely missed that in the API Reference.  

Thanks!!