topic Re: how to set properties on esri:Legend component? in ArcGIS API for Flex Questions

how to set properties on esri:Legend component?

eddiequinlan — Mon, 30 Apr 2012 19:38:03 GMT

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.

Re: how to set properties on esri:Legend component?

SarthakDatt — Fri, 10 Dec 2021 21:08:41 GMT

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.

Re: how to set properties on esri:Legend component?

eddiequinlan — Wed, 02 May 2012 13:03:51 GMT

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

Re: how to set properties on esri:Legend component?

SarthakDatt — Fri, 10 Dec 2021 21:08:44 GMT

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://

Re: how to set properties on esri:Legend component?

eddiequinlan — Wed, 02 May 2012 16:11:49 GMT

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

Re: how to set properties on esri:Legend component?

SarthakDatt — Wed, 02 May 2012 16:56:53 GMT

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

Re: how to set properties on esri:Legend component?

eddiequinlan — Wed, 02 May 2012 16:58:54 GMT

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

Eddie

Re: how to set properties on esri:Legend component?

eddiequinlan — Fri, 04 May 2012 20:12:32 GMT

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