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; } } }

Detailed/nitpicky customization of Legend

ZoeZaloudek

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.

Find more posts tagged with

Accepted answers

ZoeZaloudek

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?).

All comments

JosephPeters1

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!

ZoeZaloudek

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?).

JonMorris2

Don't know if it helps, but this blog post suggests adding a title in order to remove it. Not sure how that works exactly

Don’t like layer title displayed by default? Add the title property into the layerInfos array.
layerInfos: [{<BR />  layer: layer,<BR />  title: "National Park Statistics 2013"<BR />}]

Maybe title: "" would clear it.

I've been struggling to produce a legend, and I don't think this widget works very well. Probably it is best to roll our own.

ZoeZaloudek

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

evtguy

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

.esriLegendServiceLabel {

display: none !important;

}

ZoeZaloudek

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.

ZoeZaloudek

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.

evtguy

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

RickeyFight

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

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.