Detailed/nitpicky customization of Legend

3032
11
Jump to solution
10-09-2015 10:48 AM
ZoeZaloudek
Occasional Contributor

I’m sure I’m just one line of code away from getting this to work just right!

In my code, I have a feature layer that is being symbolized with a class breaks renderer.  I also have a Legend (Dijit?).  The Title, color swatches and class labels are all showing up OK.  However, the legend is also showing what attribute field the renderer is using.  I’m guessing that I just need to add a line and use CSS (esriLegendServiceLabel?) to get this to go away, but I just can’t quite figure out what to put. 

Here’s a screenshot. I circled the field name that I want not to display in light blue.

currentlegend.png

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
ZoeZaloudek
Occasional Contributor

Well, after months of working on other things, I inadvertently stumbled upon a work-around that removed the field name from the legend.  I'm now using version 3.16.

I set the attributeField property of the ClassBreaksRenderer to a function (instead of just giving it the name of a field).

So, the line of code that creates my ClassBreaksRenderer is:

flyrRenderer = new CBRenderer(null, rendfunc0);

And the function that determines the values (located just above the renderer-creating line) is:

rendfunc0 = function(feature)  {

    var value = (feature.attributes)[field];

    return value;

}

I kept everything else the same - setting class breaks, symbols, etc.  And now there is no field name showing up in the legend.

This accomplishes the task I was setting out to do...  There may be a better answer out there (perhaps in JS API 4?).

View solution in original post

0 Kudos
11 Replies
RickeyFight
MVP Regular Contributor

Zoe,

Use this website to help:

Inspect and Tweak Your Pages: the Basics — Web Fundamentals

If you post the link to your site I can help more

0 Kudos
ZoeZaloudek
Occasional Contributor

OK, FIrefox has an inspector as well. I haven't used it much, but now's a good time to start, right!

Here's the link to our ENSO Comparison Tool.

0 Kudos
SteveCole
Frequent Contributor

I think you're on the right track. esriLegendServiceLabel is a CSS class so you should just be able to add an additional block of CSS into your project's CSS file:

.esriLegendServiceLabel {

    display: none;

}

If it's not honoring this CSS modifier, try this instead:

.esriLegendServiceLabel {

    display: none !important;

}

I tried this with ESRI's Legend demo and that eliminated the layer name like you're looking to do.

Steve

ZoeZaloudek
Occasional Contributor

This was interesting.  So, I added this line to the <style> section of my htm file:

.esriLegendLayerLabel{display:none !important; }

However, the field name was still showing in the legend.

But, then I switched the version of the API I was referencing... I changed from 3.14 back to 3.13.  And that seemed to do the trick, the field name was not showing any more.  Unfortunately, I was purposely using 3.14 because can easily round/pad the decimal numbers for polygon labels in my feature layer...  So for now at least, I guess we'll just have to decide which is more important to us.

0 Kudos
SteveCole
Frequent Contributor

Whoops. I think I copied the name of the CSS class incorrectly. Switch your CSS to this:

.esriLegendServiceLabel {

    display: none !important;

}

0 Kudos
ZoeZaloudek
Occasional Contributor

Upon closer inspection, you did put ServiceLabel the first time.  I was trying LayerLabel for whatever reason.

So, I tried ServiceLabel in place of LayerLabel.  It did remove the title from the legend (August 2015, Average Temperature (°F) ), but the field name (Temp) was still there...

currentlegend2.png

0 Kudos
SteveCole
Frequent Contributor

LegendLayerLabel looks more like the correct CSS class to target. I haven't used the legend widget so I don't have any experience with it so I'm basing my observations on the ESRI samples that use the widget. From what I can see in this sample, the label you want to get rid of does not have an ID or assigned a CSS class directly. The label appears to be a child element inside an HTML table which DOES get assigned the CSS class esriLegendLayerLabel.

That should work but I can't tell why it's not working for you.

ZoeZaloudek
Occasional Contributor

And only using version 3.14 .  When I switch to version 3.13, the attribute field name doesn't show up.  At least this has been a learning experience, I've never really used the Inspector before.  Maybe I just need to learn to create my own Legend from scratch without using the widget.  That will probably satisfy the control freak in me   Thanks for your suggestions! 

0 Kudos
JosephPeters1
Esri Contributor

Just wanted to chime in that I was working on the same problem in the JavaScript 4.2 API and adding this to my <style> section in my html doc worked for me:

.esri-legend__layer-caption {
    display: none !important;
}

This thread helped me narrow a solution down and it's been on my list of things to figure out for awhile, so thanks!