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.

[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/017p0000001s000...

[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 · Accepted solution]

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>
<!-- settings here control size of swatch and alignment thereof -->
<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