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

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

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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:

<SPAN class="keyword token">const</SPAN> bathLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN>bathyUrl<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
      id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Lakes Bathymetry"</SPAN><SPAN class="punctuation token">,</SPAN>
      infoTemplate<SPAN class="punctuation token">:</SPAN> depthInfo<SPAN class="punctuation token">,</SPAN>
      outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>bathLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN>bathLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'load'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_createLegend</SPAN><SPAN class="punctuation token">(</SPAN>bathLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setExtent</SPAN><SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">.</SPAN>initExt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      loading<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">"none"</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

_createLegend<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">var</SPAN> legendParams <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            arrangement<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN>
            autoUpdate<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
            map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
            layerInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
              layer<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">,</SPAN>
              title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Lakes Bathymetry"</SPAN>
            <SPAN class="punctuation token">}</SPAN>
       <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
       <SPAN class="keyword token">var</SPAN> legend <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN>legendParams<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>legendDiv<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
       console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>"legend'<SPAN class="punctuation token">,</SPAN> legend<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>  <SPAN class="comment token">///only 1 childNode, no legend node</SPAN>
       legend<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>       
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>legend-div<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>legendDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">margin-top</SPAN><SPAN class="punctuation token">:</SPAN>5px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN>block<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>250px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>100%<SPAN class="punctuation token">;</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

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

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Gene,

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

_createLegend<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">var</SPAN> legendParams <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
            arrangement<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN>
            autoUpdate<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
            map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
            layerInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
              layer<SPAN class="punctuation token">:</SPAN> layer<SPAN class="punctuation token">,</SPAN>
              title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Lakes Bathymetry"</SPAN>
            <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
       <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
       <SPAN class="keyword token">var</SPAN> legend <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN>legendParams<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>legendDiv<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
       console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>"legend'<SPAN class="punctuation token">,</SPAN> legend<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>  <SPAN class="comment token">///only 1 childNode, no legend node</SPAN>
       legend<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>       
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

FranklinAlexander

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.

RobertScheitlin__GISP

Franklin,

And you get no errors in the console?

FranklinAlexander

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.

RobertScheitlin__GISP

Franklin,

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.