topic Re: How to add legend to dom element in widget in ArcGIS Web AppBuilder Questions

How to add legend to dom element in widget

FranklinAlexander — Sat, 11 Dec 2021 20:39:54 GMT

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

Re: How to add legend to dom element in widget

RobertScheitlin__GISP — Fri, 04 Sep 2020 18:35:03 GMT

Franklin,

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

Re: How to add legend to dom element in widget

FranklinAlexander — Fri, 04 Sep 2020 19:12:41 GMT

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.

Re: How to add legend to dom element in widget

RobertScheitlin__GISP — Fri, 04 Sep 2020 19:24:48 GMT

Franklin,

And you get no errors in the console?

Re: How to add legend to dom element in widget

FranklinAlexander — Fri, 04 Sep 2020 19:37:06 GMT

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.

Re: How to add legend to dom element in widget

RobertScheitlin__GISP — Fri, 04 Sep 2020 19:48:08 GMT

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

Re: How to add legend to dom element in widget

FranklinAlexander — Fri, 04 Sep 2020 20:04:21 GMT

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.

Re: How to add legend to dom element in widget

FranklinAlexander — Fri, 04 Sep 2020 20:06:32 GMT

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

Re: How to add legend to dom element in widget

FranklinAlexander — Fri, 04 Sep 2020 20:07:55 GMT

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

Re: How to add legend to dom element in widget

RobertScheitlin__GISP — Fri, 04 Sep 2020 20:16:38 GMT

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.

Re: How to add legend to dom element in widget

FranklinAlexander — Fri, 04 Sep 2020 20:22:37 GMT

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

Re: How to add legend to dom element in widget

RobertScheitlin__GISP — Fri, 04 Sep 2020 20:34:50 GMT

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

Re: How to add legend to dom element in widget

FranklinAlexander — Fri, 04 Sep 2020 20:44:33 GMT

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

Re: How to add legend to dom element in widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:39:57 GMT

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

Re: How to add legend to dom element in widget

FranklinAlexander — Tue, 08 Sep 2020 12:47:24 GMT

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

Thanks!!