topic Re: select map graphics text and change color to show selection in ArcGIS API for Flex Questions

select map graphics text and change color to show selection

eddiequinlan — Fri, 11 Mar 2011 12:59:27 GMT

Any help appreciated....

Here is what I'm trying to accomplish.

The user has the ability to add map text graphics vi mappoint.
After the map has multiple pieces of map text, allow the user to interactively select the text and make graphic adjustments.... ie color, size, location, etc....

I've reviewed alot of the code to select the text using graphics contained within the map extent, and then can move the text to a new location.

My problem is, when the user selects the text it needs to change color to indicate the text has been selected. This part works.
After moving the text, it should return to it's original color.... ie original textsymbol.
I've been trying to accomplish this by the following: once the user selects the text, I save the textsymbol to a temp textsymbol. I then change the selected text to a defined text symbol. Once the text has been repositioned on the map, I then set the text back to it's original state via the temp textsymbol.
This appears to work initially. However, after mulitiple selections of text and moving them around the process doesn't work properly. Various other text on the map changes to the selection color.

I tried the following method as shown in the forum:
for (var i:Number = 0; i < myGraphicsLayer.graphicProvider.length; i++)
{
graphic = myGraphicsLayer.graphicProvider as Graphic;

if (extent.contains(MapPoint(graphic.geometry)))
{
   Sym = graphic.symbol as TextSymbol;   //gets info from selected text
   selText.text = Sym.text;
   //graphicName = graphic.name.toString();
   //Alert.show(graphicName); //gets graphic name
   graphic.symbol = selText;
   results.push(graphic);
}
   //else if point was previously highlighted, reset its symbology
else if (graphic.symbol == selText)
{
   graphic.symbol = aText;
}
}
AdjustGraphics.activate(1, results);

This actually works, except all text which is not selected reverts back to a set textsymbol. If the map has alot of text with various textsymbols, they all get reset.

My thoughts were to try and select the mappoint(ie text).... name it or id it.... change it to the selection color...... make location adjustments...... then restore the text to its color, by selecting the graphic based on the temp name/id I assigned it. Is this possible? Does anyone have a more effective way to accomplish what I'm attempting?

thanx again,

Eddie Quinlan
G.I.S. Coordinator
Okaloosa County Property Appraiser

Re: select map graphics text and change color to show selection

andrewj_ca — Fri, 11 Mar 2011 16:00:36 GMT

Eddie,

Have you considered using the events of the graphic itself rather than iterating the graphicsLayer everytime? I typically use the mouse click event of my graphic to select it. This will be much more efficient when you start getting into more items on the graphicsLayer.

Re: select map graphics text and change color to show selection

andrewj_ca — Fri, 11 Mar 2011 16:03:22 GMT

My street view widget actually works on this premise.

http://www.arcgis.com/home/item.html?id=f069d8a3aa304e29a432b48e5f64ca74

Have a look at the code I use for the drag and drop of the street view icon (PictureMarkerSymbol)

Re: select map graphics text and change color to show selection

eddiequinlan — Tue, 15 Mar 2011 14:44:46 GMT

Thank you Andrew,

Your code was easy to follow and you pointed me in the right direction. Your method was definitely easier than mine. If this is helpful to anyone here is how i did it.

1. first i turn on graphic listner for all graphics in the layer

private function TurnGraphicListnerOn():void
{
// Turns on Graphic Listner for each graphic in graphics layer so selections can be made.
for each(addedGraphic in myGraphicsLayer.graphicProvider)
{
   if (addedGraphic.hasEventListener(MouseEvent.CLICK)==false)
   {
    addedGraphic.addEventListener(MouseEvent.CLICK, Graphic_Clicked, false);
   }
}
}

2.   Then select graphic by mouse click. Change color by predefined textsymbol. Then move text or add code to edit.

private function Graphic_Clicked(event:MouseEvent):void
{
results = [];
SelGraphic = Graphic(event.currentTarget);

Sym = new TextSymbol();
Sym = SelGraphic.symbol as TextSymbol;

SelText.text = Sym.text;
SelGraphic.symbol = SelText;

results.push(SelGraphic);
AdjustGraphics.activate(1, results);
}

3.    Reset text back to original color........

private function End_Graphic_Move():void
{
InitText.text = Sym.text;
InitText.color = Sym.color;
SelGraphic.symbol = InitText;

AdjustGraphics.deactivate();
}

Re: select map graphics text and change color to show selection

eddiequinlan — Tue, 15 Mar 2011 14:52:19 GMT

PS, in addition to step #3

you may want to remove the event listner for all the graphics

for each(addedGraphic in myGraphicsLayer.graphicProvider)
{
if (addedGraphic.hasEventListener(MouseEvent.CLICK)==true)
{
   addedGraphic.removeEventListener(MouseEvent.CLICK, Graphic_Clicked);
}
}

Re: select map graphics text and change color to show selection

hemachandra — Thu, 17 Mar 2011 06:14:00 GMT

HI Eddie,
To achieve this task is simple. First you have to maintain only one graphic object.Then add mouse click listener for graphical layer in init method. Then add graphical layer to map.
When clicking graphic object means your current object is graphcial layer and target object is graphic object.
Now u have graphic object. Then apply change event for color picker component andy apply color for graphic object by using symbols inside method of change handler.And also if u want to remove from layer just do graphicalLayer.remove(event.traget) inside click handler.

If you need any help in this please fell free to contact me on vhemachandra@gmail.com

Regards
Chandra.

Any help appreciated....

Here is what I'm trying to accomplish.

The user has the ability to add map text graphics vi mappoint.
After the map has multiple pieces of map text, allow the user to interactively select the text and make graphic adjustments.... ie color, size, location, etc....

I've reviewed alot of the code to select the text using graphics contained within the map extent, and then can move the text to a new location.

My problem is, when the user selects the text it needs to change color to indicate the text has been selected. This part works.
After moving the text, it should return to it's original color.... ie original textsymbol.
I've been trying to accomplish this by the following: once the user selects the text, I save the textsymbol to a temp textsymbol. I then change the selected text to a defined text symbol. Once the text has been repositioned on the map, I then set the text back to it's original state via the temp textsymbol.
This appears to work initially. However, after mulitiple selections of text and moving them around the process doesn't work properly. Various other text on the map changes to the selection color.

I tried the following method as shown in the forum:
for (var i:Number = 0; i < myGraphicsLayer.graphicProvider.length; i++)
{
graphic = myGraphicsLayer.graphicProvider as Graphic;

if (extent.contains(MapPoint(graphic.geometry)))
{
   Sym = graphic.symbol as TextSymbol;   //gets info from selected text
   selText.text = Sym.text;
   //graphicName = graphic.name.toString();
   //Alert.show(graphicName); //gets graphic name
   graphic.symbol = selText;
   results.push(graphic);
}
   //else if point was previously highlighted, reset its symbology
else if (graphic.symbol == selText)
{
   graphic.symbol = aText;
}
}
AdjustGraphics.activate(1, results);

This actually works, except all text which is not selected reverts back to a set textsymbol. If the map has alot of text with various textsymbols, they all get reset.

My thoughts were to try and select the mappoint(ie text).... name it or id it.... change it to the selection color...... make location adjustments...... then restore the text to its color, by selecting the graphic based on the temp name/id I assigned it. Is this possible? Does anyone have a more effective way to accomplish what I'm attempting?

thanx again,

Eddie Quinlan
G.I.S. Coordinator
Okaloosa County Property Appraiser

Re: select map graphics text and change color to show selection

andrewj_ca — Thu, 17 Mar 2011 10:31:58 GMT

Eddie,

for each(addedGraphic in myGraphicsLayer.graphicProvider)
{
if (addedGraphic.hasEventListener(MouseEvent.CLICK)==true)
{
addedGraphic.removeEventListener(MouseEvent.CLICK, Graphic_Clicked);
}
}

Rather that iterating the graphics to assign the eventlistener, you can add the eventlistener at the same time you first add the graphic to the graphicslayer. you can also do this by utilizing the graphicslayer event for "graphic added". Cheers

Re: select map graphics text and change color to show selection

eddiequinlan — Wed, 30 Mar 2011 16:05:56 GMT

Thank you both for the help. I almost have my menu working as it should. The problem i have now is as follows:

I have a text menu where the user can input text, font, size, etc.........
then they "click on the map" and the text is added and can still be adjusted at this point thru the menu.

Now the user wants to add another piece of text....... So, they click "add" on menu and input the text. However, when the click on the map it adds the text but is still editing the previously added text.

I can't seem to disconnect the previously added text/symbol/graphic on the map from the text menu.
I've tried New Graphic, New Text, New Symbol, resetting all the properties of the graphic, but it still keeps editing.

If i continue to add text (say a 3rd and 4th piece) the 1st and 2nd piece retain the correct properties. Its only the previously added text that continues to be adjusted, when adding a new piece of text.

Hope this makes sense. I know I must be missing one piece of code to save/stop editing the previous text.

Thank you,
Eddie

Re: select map graphics text and change color to show selection

andrewj_ca — Wed, 30 Mar 2011 16:19:39 GMT

When you do graphic stuff try copying it to intersact with it.

var gra:Graphic = mx.utils.ObjectUtil.copy(g) as Graphic;