+ Reply to Thread
Results 1 to 8 of 8

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

  1. #1
    eddie quinlan
    Join Date
    Apr 2010
    Posts
    111
    Points
    0
    Answers Provided
    1


    0

    Default how to set properties on esri:Legend component?

    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.

  2. #2
    Sarthak Datt
    Join Date
    Jan 2010
    Posts
    152
    Points
    105
    Answers Provided
    16


    0

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

    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:

    Code:
     <s:Group id="contentGroup" width="30" height="30"/>
    Hope that helps.
    Sarthak Datt
    ESRI Flex Team

  3. #3
    eddie quinlan
    Join Date
    Apr 2010
    Posts
    111
    Points
    0
    Answers Provided
    1


    0

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

    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

  4. #4
    Sarthak Datt
    Join Date
    Jan 2010
    Posts
    152
    Points
    105
    Answers Provided
    16


    0

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

    It is referenced in the legend skin as:

    Code:
    legendDataGroup.itemRenderer = new ClassFactory(LegendGroupItemRenderer);
    So, you can have something like:

    MyLegendSkin.mxml

    Code:
    legendDataGroup.itemRenderer = new ClassFactory(MyLegendGroupItemRenderer);
    where MyLegendGroupItemRenderer.mxml is:

    Code:
    <?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:

    Code:
    <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/fle...000000/http://
    Last edited by sdatt; 05-02-2012 at 08:59 AM.
    Sarthak Datt
    ESRI Flex Team

  5. #5
    eddie quinlan
    Join Date
    Apr 2010
    Posts
    111
    Points
    0
    Answers Provided
    1


    0

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

    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

  6. #6
    Sarthak Datt
    Join Date
    Jan 2010
    Posts
    152
    Points
    105
    Answers Provided
    16


    0

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

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

  7. #7
    eddie quinlan
    Join Date
    Apr 2010
    Posts
    111
    Points
    0
    Answers Provided
    1


    0
    This post is marked as the answer

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

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


    Eddie

  8. #8
    eddie quinlan
    Join Date
    Apr 2010
    Posts
    111
    Points
    0
    Answers Provided
    1


    0

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

    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

+ Reply to Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts