7 Replies Latest reply on May 4, 2012 1:12 PM by schmedly

    how to set properties on esri:Legend component?

    schmedly
      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?
          sdatt-esristaff
          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?
            schmedly
            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?
              sdatt-esristaff
              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?
                schmedly
                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?
                  sdatt-esristaff
                  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?
                    schmedly
                    thanx sdatt, i think i've got it from here


                    Eddie
                    • Re: how to set properties on esri:Legend component?
                      schmedly
                      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