Delete Indisvidual graphics?

[ionarawilson1]

I have a tool that creates labels (graphics) when the user clicks on a button and then on the map. Is there a way to delete these labels one by one? Thank  you!!!  Here is the code:

 private function addtext():void  {       myMap.addEventListener(MapMouseEvent.MAP_CLICK, onClickFunction);      }       private function onClickFunction(event:MapMouseEvent):void       {            const mapPoint:MapPoint = event.mapPoint;    mapPoint.spatialReference = new SpatialReference(102100);            var myGraphicMarker:Graphic = new Graphic(mapPoint, new TextSymbol(labeltext.text,null,0x000000,1, tsBorder.selected,tsBorderColor.selectedColor,tsBackground.selected,tsColor2.selectedColor,placement.selectedItem,angle.value,xoffset.value,yoffset.value,new TextFormat(myFont.selectedItem, tfSize.value, tsColor1.selectedColor, tfBold.selected,tfItalic.selected, tfUnderline.selected),      null,null));    theTextGraphic = myGraphicMarker        //myGraphicMarker.toolTip = "Marker added with ActionScript";    pointGraphicsLayer.add(theTextGraphic);    pointGraphicsLayer.refresh();      }

[IvanBespalov]

by the same way like you just added it using remove() function

myGaphicsLayer.remove(myTextGraphic)
remove() method 
public function remove(graphic:Graphic):void
Removes the specific graphic.

Parameters

graphic:Graphic �?? The graphic to remove.
See also

com.esri.ags.events.GraphicEvent.GRAPHIC_REMOVE

[ionarawilson1]

Thank you Ivan. The issue is that when I have two labels, it will delete the first one added although I clicked on the second label added and also if there are more than 2, like six, it will delete 3 labels when I click in just one label. If I create 3 labels, it will delete two and so forth...Any ideas why? Here is my code: thanks

//code called when user clicks a button

    private function deletedonetext():void
   {
    
    myMap.removeEventListener(MapMouseEvent.MAP_CLICK, onClickFunction);
    labelmapbutton.selected = false;
    deletelabelmapbutton.selected = false;
    
    movelabelmapbutton.selected = false;
    
    myEditTool2.deactivate();
   
   
    myMap.addEventListener(MapMouseEvent.MAP_CLICK, onClickFunction2);
   
   
   }
 
   
   
   
   protected function onClickFunction2(event:MouseEvent):void
   {
    
    
    var grProvider:ArrayCollection = pointGraphicsLayer.graphicProvider as ArrayCollection;
    for each (var gr:Graphic in grProvider)
    {
     
     pointGraphicsLayer.remove(gr);
     
    }
   }

[ionarawilson1]

And if I have the following code it will delete the first label I select only

  
   protected function onClickFunction2(event:MouseEvent):void
   {
    
    
    pointGraphicsLayer.remove(theTextGraphic);
  
   }

[KenBuja]

Try this

protected function onClickFunction2(event:MouseEvent):void             
{
    pointGraphicsLayer.remove(event.target);
}

[ionarawilson1]

I tried that Ken but it did not work. I used the following code and nothing happens when I click on a graphic:

protected function onClickFunction2(event:MouseEvent):void             
{

  var graphic2:Graphic = event.currentTarget as Graphic
    pointGraphicsLayer.remove(graphic2);
}

[KenBuja]

I made a slight modification to the Adding Graphics sample and it seems to work properly. Maybe it's because I used the graphic layer's click event and event.target instead of event.currentTarget

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:esri="http://www.esri.com/2008/ags"
               pageTitle="Adding graphics using MXML and/or ActionScript">
    
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" paddingTop="3"/>
    </s:layout>
    
    <fx:Script>
        <=!=[=C=D=A=T=A=[
            import com.esri.ags.SpatialReference;
            import com.esri.ags.symbols.PictureMarkerSymbol;
            
            private function addSomeMarkers():void
            {
                // This is just to show how to add markers
                // using ActionScript code as opposed to MXML tags.
                var myGraphicMarker:Graphic = new Graphic(new MapPoint(1447100, 7477200, new SpatialReference(102100)),
                    new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 22, 0x009933));
                myGraphicMarker.toolTip = "Marker added with ActionScript";
                myGraphicsLayer.add(myGraphicMarker);
                
                // PictureMarker - embedded image
                [Embed('assets/globe.png')]
                var picEmbeddedClass:Class;
                var pictureMarker:PictureMarkerSymbol = new PictureMarkerSymbol(picEmbeddedClass);
                
                var myGraphicPic:Graphic = new Graphic(new MapPoint(-411000, 4924000, new SpatialReference(102100)));
                myGraphicPic.symbol = pictureMarker;
                myGraphicsLayer.add(myGraphicPic);
                
                var myPolyline:Polyline = new Polyline(
                    [[
                        new MapPoint(-1726185, 9543036),
                        new MapPoint(34923, 6920940),
                        new MapPoint(1874303, 6255632),
                        new MapPoint(1835168, 6255632),
                        new MapPoint(1913439, 6138225)
                    ]], new SpatialReference(102100));
                var myGraphicLine:Graphic = new Graphic(myPolyline);
                myGraphicLine.symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, 0xDD2222, 1.0, 4)
                myGraphicsLayer.add(myGraphicLine);
                
                var myPolygon:Polygon = new Polygon(
                    [[
                        new MapPoint(2352491, -1992338),
                        new MapPoint(2332923, -2461967),
                        new MapPoint(2646009, -2266288),
                        new MapPoint(3076503, -2324992),
                        new MapPoint(3272181, -2520670),
                        new MapPoint(3506996, -2559806),
                        new MapPoint(3702675, -3049003),
                        new MapPoint(3370021, -3675175),
                        new MapPoint(2763416, -4046965),
                        new MapPoint(2117676, -4144804),
                        new MapPoint(1961133, -3890422),
                        new MapPoint(2000269, -3655607),
                        new MapPoint(1667615, -3185978),
                        new MapPoint(1550208, -2422831),
                        new MapPoint(1334961, -1953202),
                        new MapPoint(2352491, -1992338)
                    ]], new SpatialReference(102100));
                var myGraphicPolygon:Graphic = new Graphic();
                myGraphicPolygon.geometry = myPolygon;
                myGraphicPolygon.symbol = new SimpleFillSymbol(
                    SimpleFillSymbol.STYLE_SOLID, // fill style
                    0xFF0000, // fill color
                    0.7 // fill alpha
                );
                myGraphicPolygon.toolTip = "Polygon added with ActionScript";
                myGraphicsLayer.add(myGraphicPolygon);
                btn.enabled = false;
            }
            
            protected function myGraphicsLayer_clickHandler(event:MouseEvent):void
            {
                myGraphicsLayer.remove(event.target as Graphic);
            }
            
        ]=]=>
    </fx:Script>
    
    <s:Label width="100%" text="This sample demonstrates adding graphics to the map using either MXML or ActionScript.  Simple marker symbols, picture marker symbols, simple line symbols, simple fill symbols, and picture fill symbols are shown."/>
    <s:Button id="btn"
              click="addSomeMarkers()"
              label="Add some more markers using ActionScript"/>
    <esri:Map id="myMap"
              level="2"
              wrapAround180="true">
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:GraphicsLayer id="myGraphicsLayer" click="myGraphicsLayer_clickHandler(event)">
            <esri:Graphic toolTip="California MapPoint with a SimpleMarkerSymbol">
                <esri:geometry>
                    <esri:MapPoint x="-13163000" y="4035000"
                                   spatialReference="{new SpatialReference(102100)}"/>
                </esri:geometry>
                <esri:symbol>
                    <esri:SimpleMarkerSymbol color="0x0033DD" size="18"/>
                </esri:symbol>
            </esri:Graphic>
            <esri:Graphic toolTip="Hurricane polyline with a SimpleLineSymbol">
                <esri:geometry>
                    <esri:Polyline spatialReference="{new SpatialReference(102100)}">
                        <fx:Array>
                            <fx:Array>
                                <esri:MapPoint x="-4700503" y="1128848"/>
                                <esri:MapPoint x="-7909635" y="2819513"/>
                                <esri:MapPoint x="-8144450" y="4199048"/>
                                <esri:MapPoint x="-7244327" y="5261584"/>
                            </fx:Array>
                        </fx:Array>
                    </esri:Polyline>
                </esri:geometry>
                <esri:symbol>
                    <esri:SimpleLineSymbol width="6" color="0xFF0000"/>
                </esri:symbol>
            </esri:Graphic>
            <esri:Graphic toolTip="Brazilian polygon with a SimpleFillSymbol">
                <esri:geometry>
                    <esri:Polygon spatialReference="{new SpatialReference(102100)}">
                        <fx:Array>
                            <fx:Array>
                                <esri:MapPoint x="-3867905" y="-671044"/>
                                <esri:MapPoint x="-4533702" y="-2578326"/>
                                <esri:MapPoint x="-5316417" y="-2832708"/>
                                <esri:MapPoint x="-5844750" y="-3869806"/>
                                <esri:MapPoint x="-6333947" y="-3498016"/>
                                <esri:MapPoint x="-6412218" y="-1942370"/>
                                <esri:MapPoint x="-8211974" y="-954779"/>
                                <esri:MapPoint x="-7703209" y="229077"/>
                                <esri:MapPoint x="-5736637" y="454597"/>
                                <esri:MapPoint x="-3867905" y="-671044"/>
                            </fx:Array>
                        </fx:Array>
                    </esri:Polygon>
                </esri:geometry>
                <esri:symbol>
                    <esri:SimpleFillSymbol alpha="0.7" color="0x009933"/>
                </esri:symbol>
            </esri:Graphic>
        </esri:GraphicsLayer>
    </esri:Map>
</s:Application>

[ionarawilson1]

When I use this code

pointGraphicsLayer.remove(event.target as Graphic);

and I debug, I find that two variables are throwing errors:

movementX - exception thrown by getter
movementY - exception thrown by getter

And the error is ReferenceError: Error #1069: Property movementX not found on flash.events.MouseEvent and there is no default value.

Any  idea why this is happening? Is it because my mappoint is not a predetermined one but based on the event's map point of the function that added the graphic?

private function addtext():void
 {
 
 
  myMap.addEventListener(MapMouseEvent.MAP_CLICK, onClickFunction);
 
 
 }
   
  private function onClickFunction(event:MapMouseEvent):void
   
  {
   
   
   const mapPoint:MapPoint = event.mapPoint;
   mapPoint.spatialReference = new SpatialReference(102100);
   
   
   var myGraphicMarker:Graphic = new Graphic(mapPoint, new TextSymbol(labeltext.text,null,0x000000,1, tsBorder.selected,tsBorderColor.selectedColor,tsBackground.selected,tsColor2.selectedColor,placement.selectedItem,angle.value,xoffset.value,yoffset.value,new TextFormat(myFont.selectedItem, tfSize.value, tsColor1.selectedColor, tfBold.selected,tfItalic.selected, tfUnderline.selected), 
    null,null));
   theTextGraphic = myGraphicMarker
   
   //myGraphicMarker.toolTip = "Marker added with ActionScript";
   pointGraphicsLayer.add(theTextGraphic);
   pointGraphicsLayer.refresh();
  
  } 

[ionarawilson1]

It is like not recognizing the graphic as a target to the click event

[MarkHoyland]

You could add a context menu to the graphic. ie right click on the graphic and choose "delete"

private var graphicContextMenu:ContextMenu = new ContextMenu();

protected function application1_creationCompleteHandler(event:FlexEvent):void
{
 graphicContextMenu.hideBuiltInItems();
 var item:ContextMenuItem;
 item = new ContextMenuItem("Delete me");
 item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, deleteGraphic_handler);
 graphicContextMenu.customItems.push(item);
}

protected function deleteGraphic_handler(event:ContextMenuEvent):void
{
 trace("deleteGraphic_handler");
 if (event.contextMenuOwner is Graphic)
 {
  var graphic:Graphic = event.contextMenuOwner as Graphic;
  graphic.graphicsLayer.remove(graphic);
 }
}

protected function map_mapClickHandler(event:MapMouseEvent):void
{
 const mapPoint:MapPoint = event.mapPoint;
 
 var textSymbol:TextSymbol = new TextSymbol("myTextSymbol",null,0x000000, true,0,true);
 var myGraphicMarker:Graphic = new Graphic(mapPoint, textSymbol);
 
 myGraphicMarker.contextMenu = graphicContextMenu;
 
 graphicsLayer.add(myGraphicMarker);
 graphicsLayer.refresh();
}