How to add legend to dom element in widget

2038
14
Jump to solution
09-04-2020 11:23 AM
FranklinAlexander
Occasional Contributor III

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

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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();       
},

View solution in original post

0 Kudos
14 Replies
RobertScheitlin__GISP
MVP Emeritus

Franklin,

  Shouldn't your legendParams have the map property as this.map?

0 Kudos
FranklinAlexander
Occasional Contributor III

Robert,

I changed it to this.map and still doesn't load. I redefined this.map to just 'map' because this.map is sometimes undefined depending on scope. Having said that, both seem to be defined correctly so that doesn't seem to be the issue. This one has me stumped. The only thing I can think of is that something is wrong with the layer, but the layer loads and is visible in the map and I don't see anything in the layer properties that would raise any flags.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Franklin,

 And you get no errors in the console?

0 Kudos
FranklinAlexander
Occasional Contributor III

I wish I was getting an error, at least that would give me a direction. All I can see at this point is that if I look under the legend domNode, I should be seeing 2 childnodes, one for the main legend and one for the message, but I only see the message element. That seems to mean that the legend isn't being created (at least the main node), or it isn't creating the node which doesn't make sense. I am wandering if for some reason it can't see the renderer correctly and therefore defaults to the 'No Legend' message. I know it's not a timing issue because I just called the create legend function from within a setTimeout function and set the time until well after the graphics fully loaded, but still no legend. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

If you do NOT provide the layerInfos property to the legend dijit does it show all layers with their legends?

0 Kudos
FranklinAlexander
Occasional Contributor III

 I removed the layerInfos property and the legend still does not show. There is another property called 'layers', however, which now shows an array with 3 layers. 1 is the basemap, 1 is the bathymetry layer that I wish to show in the legend, and the other is a contours layer that I do NOT wish to show in the legend. 

0 Kudos
FranklinAlexander
Occasional Contributor III

Robert, never mind, now both of the operational layers are showing, so that's progress! 

0 Kudos
FranklinAlexander
Occasional Contributor III

is there a property I can set so that only the desired layer will show up?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

I noticed in the docs that the layerInfos object layer property list two valid layer types.

A layer to add to the legend. Valid layer types are: ArcGISTiledMapServiceLayer,ArcGISDynamicMapServiceLayer.
0 Kudos