topic Re: InfoSymbol and TextSymbol in ArcGIS API for Flex Questions

InfoSymbol and TextSymbol

GregoryBoratyn — Tue, 09 Oct 2012 14:52:45 GMT

I was wondering if the TextSymbol object can somehow be used with the InfoSymbol object.
This would allow me to have text I can rotate, change color, font size etc. inside the "bubble".
I tried a few options but the text doesn't show up.
I had an InforSymbolRenderer that looks like this:

<Declaration>
<esri:TextSymbol id="textSymbol" />
</Declaration>

Plus some ActionScript code that initializes text, something like this:
var txtFormat:TextFormat = new TextFormat(textFont.selectedItem.font, numTextSize.value, cpText.selectedColor, bold.selected, italic.selected, underline.selected);
textSymbol.textFormat = txtFormat;
textSymbol.angle = numTextRotation.value;
graphic.symbol = textSymbol; // graphic obj takes geometry as a parameter

In any case the bubble shows up with the "arrowhead" only, no text.
Any suggestions?
Is this even possible?
Thanks

Re: InfoSymbol and TextSymbol

IvanBespalov — Tue, 09 Oct 2012 17:15:02 GMT

text parameter

The text string to display.

or textAttribute property

The string representing the attribute of the graphic that should populate the "text" content.

or textFunction property

The text function allows for the text of the text symbol to be dynamically picked - for example based on attributes or position of the graphic.

Sorry, but I did not found any part of code, what initialize text in your sample 😞 - only format and angle

Plus some ActionScript code that initializes text, something like this:
var txtFormat:TextFormat = new TextFormat(textFont.selectedItem.font, numTextSize.value, cpText.selectedColor, bold.selected, italic.selected, underline.selected);
textSymbol.textFormat = txtFormat;
textSymbol.angle = numTextRotation.value;
graphic.symbol = textSymbol; // graphic obj takes geometry as a parameter

Re: InfoSymbol and TextSymbol

GregoryBoratyn — Tue, 09 Oct 2012 17:25:47 GMT

Here is more complete version, with a text that TextSymbol constructor takes as an argument.

var textSymbol:TextSymbol = new TextSymbol(txtLabel.text);
var txtFormat:TextFormat = new TextFormat(textFont.selectedItem.font, numTextSize.value, cpText.selectedColor, bold.selected, italic.selected, underline.selected);
textSymbol.textFormat = txtFormat;
textSymbol.angle = numTextRotation.value;
graphic.symbol = textSymbol;

If I do this:

var mySymbol:InfoSymbol = new InfoSymbol();
mySymbol.infoRenderer = new ClassFactory(TextBubbleRenderer);
graphic.symbol = mySymbol;

The TextBubbleRenderer has code I'm showing in my first post...
Here it is again:
<Declaraions>
<esri:TextSymbol id="textSymbol" />
</Declarations>

The code above that initializes the TextSymbol and TextFormat with all the values is now done in renderer inside the method that gets executed on creationComplete.

As you can see this will compile and work without exceptions, but the Text passed in won't show up in the bubble generated by the InfoSymbol object. I just don't know if I can actually married the InfoSymbol with TextSymbol so that text is displayed in InfoSymbol "bubble".
Can this be done?
Thanks

Re: InfoSymbol and TextSymbol

IvanBespalov — Sat, 11 Dec 2021 17:00:25 GMT

I still do not understand your plan to put a symbol to other symbol info container...

As I understand, each Symbol (Picture, Text, Composite ...) is tied to the Map and can not exist without it. During symbol initialization, graphic geometry is converted to screen coordinates and the convertion result is the place where symbol must be shown in FLEX application -> in your case TextSymbol has no own Graphic -> has no own Geometry -> as a result can not be shown.
Maybe I'm wrong, but to me it all seems so.

In API reference for com.esri.ags.symbols.InfoSymbol a lot of links to samples.
Based on samples: simple app - add graphic to map with one text attribute ("myTitle"). This attribute is shown in InfoSymbol's container as Label.
Application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:s="library://ns.adobe.com/flex/spark">
 
 <!-- Adobe SDK 4.6.0 -->
 <!-- ArcGIS API for FLEX 3.0 -->
 
 <s:layout>
  <s:VerticalLayout horizontalAlign="center" />
 </s:layout>
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.Graphic;
   import com.esri.ags.events.GraphicEvent;
   import com.esri.ags.geometry.MapPoint;
   import com.esri.ags.symbols.InfoSymbol;

   /**
    * Listen graphic add handler
    */
   protected function onGraphicAdd(event:GraphicEvent):void
   {
    var infoSymbol:InfoSymbol = new InfoSymbol();
    infoSymbol.infoRenderer = new ClassFactory(MyInfoSymbolRenderer);
    
    event.graphic.symbol = infoSymbol;
   }

   /**
    * Listen button click handler
    */
   protected function onAddClick(event:MouseEvent):void
   {
    var point:MapPoint = new MapPoint(Math.random()*10000000, Math.random()*10000000, map.spatialReference);
    var graphic:Graphic = new Graphic(point, null, {myTitle: txtTitle.text, x: point.x, y: point.y});
    gLayer.add(graphic);
   }

  ]]>
 </fx:Script>
 
 <s:HGroup width="100%"
     horizontalAlign="center"
     verticalAlign="middle">
  <s:Label text="Set title for new graphic:" />
  <s:TextInput id="txtTitle"
      width="250"/>
  <s:Button label="Add graphic" 
      click="onAddClick(event)" />
 </s:HGroup>
 <esri:Map id="map">
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
  <esri:GraphicsLayer id="gLayer" 
       autoMoveGraphicsToTop="true"
       graphicAdd="onGraphicAdd(event)"/>
 </esri:Map>
</s:Application>

and info renderer 'MyInfoSymbolRenderer.mxml' for InfoSymbol:

<?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" 
    autoDrawBackground="true"
    dataChange="onDataChange(event)">
 <fx:Script>
  <![CDATA[   
   import mx.events.FlexEvent;
   import mx.utils.StringUtil;

   protected function onDataChange(event:FlexEvent):void
   {
    if (data.myTitle && data.myTitle.toString().length > 0)
    {     
     lblTitle.text = data.myTitle;
    }
    else if (data.x && data.x.toString().length > 0 && data.y && data.y.toString().length > 0)
    {
     lblTitle.text = StringUtil.substitute("X: {0} - Y: {1}", data.x, data.y);
    }
   }

  ]]>
 </fx:Script>
 
 <s:Label id="lblTitle" 
    fontFamily="Helvetica" 
    fontSize="14" 
    fontStyle="italic" 
    fontWeight="bold" 
    backgroundColor="0xFFFF00"/>
 
</s:ItemRenderer>

Good luck.