topic Re: Detailed/nitpicky customization of Legend in ArcGIS JavaScript Maps SDK Questions

Detailed/nitpicky customization of Legend

ZoeZaloudek — Fri, 09 Oct 2015 17:48:26 GMT

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.

Re: Detailed/nitpicky customization of Legend

RickeyFight — Fri, 09 Oct 2015 18:00:27 GMT

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

Re: Detailed/nitpicky customization of Legend

SteveCole — Sat, 11 Dec 2021 08:27:29 GMT

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

Re: Detailed/nitpicky customization of Legend

ZoeZaloudek — Fri, 09 Oct 2015 20:35:25 GMT

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.

Re: Detailed/nitpicky customization of Legend

ZoeZaloudek — Fri, 09 Oct 2015 20:51:19 GMT

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.

Re: Detailed/nitpicky customization of Legend

SteveCole — Fri, 09 Oct 2015 22:06:04 GMT

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

.esriLegendServiceLabel {

display: none !important;

}

Re: Detailed/nitpicky customization of Legend

ZoeZaloudek — Fri, 09 Oct 2015 22:17:22 GMT

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

Re: Detailed/nitpicky customization of Legend

SteveCole — Fri, 09 Oct 2015 22:28:12 GMT

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.

Re: Detailed/nitpicky customization of Legend

ZoeZaloudek — Fri, 09 Oct 2015 23:50:07 GMT

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!

Re: Detailed/nitpicky customization of Legend

JonMorris2 — Mon, 19 Oct 2015 17:32:31 GMT

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: [{ layer: layer, title: "National Park Statistics 2013" }]

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.

Re: Detailed/nitpicky customization of Legend

ZoeZaloudek — Sat, 11 Dec 2021 08:27:31 GMT

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

Re: Detailed/nitpicky customization of Legend

JosephPeters1 — Sun, 26 Feb 2017 03:03:19 GMT

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!