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

Styling of JS API Legend

ClintCabanero

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!

Trouver plus de publications taguées avec

Accepted answers

All comments

GerardoDuarte_Hodgson

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

ChristopherJohnson1

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

Thanks...Chris

ChristopherJohnson1

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

EdSaunders

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.

KristerVikström

Has anyone found the answer to this question?

danielri

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?

khutchins

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

      .esriLegendService img{
        width:55px;
      }

khutchins

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.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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