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

how to set properties on esri:Legend component?

eddiequinlan

Hi everyone,

I'm using the Legend component in my mapping app. I'm not using it as a widget. It's just a basic Legend to symbolize the layers. It opens and the visible layers are symbolized.

I'm trying to adjust the "patch" size of the symbology of the layers. As they are now, they are too big. I've tried the LegendSkin, but have had no luck. I'm not sure where to begin to accomplish this. Can it be set in the .mxd of the service? Is it set in the LegendSkin? Do I need the skin? The Legend opens whether I use the skin or not.

Any thoughts appreciated,
Eddie Q.

Vind meer berichten getagd met

Accepted answers

eddiequinlan

thanx sdatt, i think i've got it from here

Eddie

All comments

SarthakDatt

Hey Eddie,

I assume you are trying to change the size of the legend "swatches". For that you need to look at LegendGroupItemRenderer.mxml and change width/height on the contentGroup:

 <s:Group id="contentGroup" width="30" height="30"/>

Hope that helps.

eddiequinlan

sdatt,

Thank you for the reply.

I'm using the legend component in a s:titlewindow as such:

<esri:Legend id="myLegend" map="{myMap}" layers="{[salesLayer]}">

How does the Legend component reference the LegendGroupItemRenderer.mxml to read these settings. Again, I'm not using viewer or widgets... this is a flex api custom project.

thanx,
Eddie

SarthakDatt

It is referenced in the legend skin as:

legendDataGroup.itemRenderer = new ClassFactory(LegendGroupItemRenderer);

So, you can have something like:

MyLegendSkin.mxml

legendDataGroup.itemRenderer = new ClassFactory(MyLegendGroupItemRenderer);

where MyLegendGroupItemRenderer.mxml is:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                name="LegendGroupItemRenderer"
                width="230" height="35"
                autoDrawBackground="false"
                focusEnabled="false"
                mouseChildren="false">

    <fx:Script>
        <![CDATA[
            import com.esri.ags.symbols.CompositeSymbol;
            import com.esri.ags.symbols.Symbol;

            import flashx.textLayout.formats.TextAlign;

            import mx.core.IVisualElement;

            override public function set data(value:Object):void
            {
                super.data = value;

                //First remove everything from the contentGroup
                contentGroup.removeAllElements();

                // set style on the label
                templateLabel.setStyle("textAlign", TextAlign.CENTER);

                templateLabel.text = value.label;
                if (value.symbol)
                {
                    if (!(value.symbol is CompositeSymbol)) // do not show legend for composite symbols
                    {
                        contentGroup.addElement(IVisualElement(Symbol(value.symbol).createSwatch(contentGroup.width, contentGroup.height)));
                    }
                }
            }
        ]]>
    </fx:Script>

    <s:HGroup paddingLeft="10" verticalAlign="middle">
        <s:Group id="contentGroup"
                 width="myWidth" height="myHeight"/>
        <s:Label id="templateLabel"/>
    </s:HGroup>
</s:ItemRenderer>

and assign this "new" skin class to the Legend component:

<esri:Legend id="myLegend" map="{myMap}" layers="{[salesLayer]}" skinClass="MyLegendSkin">

You can control other visual aspects as well using a custom skin. For further reference you can look at: http://help.arcgis.com/en/webapi/flex/help/index.html#/Styling_and_skinning_overview/017p0000001s000000/http://

eddiequinlan

sdatt,

Thank you that fixed it......

To be clear. In the MyLegendGroupItemRenderer.mxml is where the swatch, textalignment, textfont, etc would be set accordingly? Or are some of the properties set in the MyLegendSkin?

thanx,
Eddie

SarthakDatt

Yes that is correct. Legend Skin is responsible for visual aspects of the component itself while the renderer for each legend item.

eddiequinlan

thanx sdatt, i think i've got it from here

Eddie

eddiequinlan

sdatt,

I have another related issue. I've got the Legend working as expected, but I have one minor issue. I'm setting the swatch size to '25' in the Legend. When doing this part of the swatch is missing. There should be a black border surrounding the color of the swatch. When the size is less than 35, part of the swatch border is missing. Is there a proper way to change the swatch size?

I'm adjusting the size as follows:

     if (!(value.symbol is CompositeSymbol)) // do not show legend for composite symbols
     {
      contentGroup.addElement(IVisualElement(Symbol(value.symbol).createSwatch(25, 25)));
     }
    }
   }
]]>
</fx:Script>

<s:HGroup verticalAlign="middle" gap="8" horizontalAlign="left">
<s:Group id="contentGroup"
     />
<s:Label id="templateLabel"/>
</s:HGroup>
</s:ItemRenderer>

I can either 'hard code' the size in "createSwatch(), or in contentGroup by width and height.

thanx,
Eddie

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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