topic Re: Styling of JS API Legend in ArcGIS JavaScript Maps SDK Questions

Styling of JS API Legend

ClintCabanero — Mon, 06 Dec 2010 14:05:59 GMT

Hey all,

I'm working with the AGS JS API legend dijit (its awesome!).

Has anyone successfully styled this so as to change the size of the symbol swatches (e.g. squares representing polygon features), font-family, and font-size? I'm simply trying to 'harmonize' the style of the legend dijit presentation with my site.

Thanks!

Re: Styling of JS API Legend

KellyHutchins — Fri, 10 Dec 2021 22:15:45 GMT

There are several css classes for the legend dijit that allow you to alter the default appearance, here's an example where the font color and family are modified for the text in the legend:

      .esriLegendLayerLabel{
        font-family:'Monotype Corsiva';
        color:red;
      }
      .esriLegendServiceLabel{
        font-family: 'Times New Roman';
        color:green;
      }
      .esriLegendService{
        color:orange;
        font-weight:bold;
      }

The API Reference for the JavaScript API has a listing of the CSS classes.

Re: Styling of JS API Legend

KellyHutchins — Fri, 10 Dec 2021 22:15:48 GMT

You can increase the size of the symbol swatches using something like this:

      .esriLegendService img{
        width:55px;
      }

Re: Styling of JS API Legend

RichardDaniels — Wed, 26 Jan 2011 21:03:31 GMT

Anyone know how to use this with the Javascript AGS api? Specifically. We create a legend at startup with:

        legend = new esri.dijit.Legend({map:map},"legendDiv");
        legend.startup();

and in the body of the document we have

<div id="legendDiv" dojoType="dijit.layout.ContentPane" name="my map" style="overflow:auto;width:178px;height:250px;vertical-align:top;"></div>

The discussion implies I can use CSS Styles to change the default name displayed by the dijit.Legend by modifying esriLegendServiceLabel. Where is this done and how does the digit know about it?

Re: Styling of JS API Legend

KristerVikström — Tue, 28 Feb 2012 05:19:14 GMT

Has anyone found the answer to this question?

Re: Styling of JS API Legend

EdSaunders — Tue, 28 Feb 2012 06:12:49 GMT

AFAIK, you can only change the style of the legend elements like service label, layer label, image size, etc as set out in the API. The "name" of the legend? I presume you mean the service label. This is determined by the name of the map service(s) in the legend dijit definition. You can set the name of the service using layerInfos.

Re: Styling of JS API Legend

ChristopherJohnson1 — Fri, 14 Aug 2015 16:10:45 GMT

Do you know if any of this has changed since the last post -- over 3 years ago?

Also, is the Legend title, etc, controlled by the type of renderer that is used to represent the feature layer?

For example, in this instance, a unique value renderer is used and there is no sub-header in the Legend.

However, when I use a classbreaksrenderer, the field used to calculate the breaks is shown below the Legend header (see below).

Finally, is it possible to reverse/dictate the order of the Legend items?

Thanks...Chris

Re: Styling of JS API Legend

ChristopherJohnson1 — Wed, 26 Aug 2015 11:20:42 GMT

FYI...I was able to hide the "Data_Value" using CSS and reverse the Legend items.

Thanks...Chris

Re: Styling of JS API Legend

GerardoDuarte_Hodgson — Fri, 24 May 2024 21:58:32 GMT

Hi Kelly. I would like to adjust the size of the legend. Can you help me?. This is my css: