nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Delete Indisvidual graphics?

WilsonIonara

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();      }

Find more posts tagged with

Accepted answers

MarkHoyland

I added in creationComplete of the application,
but it could be with the map's creationComplete.

Here is the full test app. (this was is with 2.5 arc gis flex api. The textSymbol for latest api is slightly different with an alpha parameter. I added a commented textSymbol which should work with newer api, but untested by me.).

<?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:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:esri="http://www.esri.com/2008/ags"       creationComplete="application1_creationCompleteHandler(event)">  <fx:Script>   <![CDATA[    import com.esri.ags.Graphic;    import com.esri.ags.events.MapMouseEvent;    import com.esri.ags.geometry.MapPoint;    import com.esri.ags.symbols.TextSymbol;        import mx.events.FlexEvent;            //[Bindable]     private var graphicContextMenu:ContextMenu = new ContextMenu();        protected function application1_creationCompleteHandler(event:FlexEvent):void    {     graphicContextMenu.hideBuiltInItems();     var item:ContextMenuItem;     item = new ContextMenuItem("Delete me");     //item.enabled = true;     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); //2.5 api     //var textSymbol:TextSymbol = new TextSymbol("myTextSymbol",null,0x000000, 1, true,0,true); // newer api               var myGraphicMarker:Graphic = new Graphic(mapPoint, textSymbol);          myGraphicMarker.contextMenu = graphicContextMenu;          graphicsLayer.add(myGraphicMarker);     graphicsLayer.refresh();    }                   ]]>  </fx:Script>  <fx:Declarations>   <!-- Place non-visual elements (e.g., services, value objects) here -->  </fx:Declarations>       <esri:Map id="map" mapClick="map_mapClickHandler(event)" >   <esri:extent>    <esri:Extent xmin="-10753431" ymin="4624151" xmax="-10737799" ymax="4635884">     <esri:SpatialReference wkid="102100"/>    </esri:Extent>   </esri:extent>   <esri:ArcGISTiledMapServiceLayer id="baseLayer" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>   <esri:GraphicsLayer id="graphicsLayer"/>  </esri:Map>     </s:Application>

All comments

WilsonIonara

Thank you so much Mark. It worked. I might create another thread to ask questions about this issue with new code I created because I am curious to what I am doing wrong, but this is also a great solution and I am going to include in my app! Thanks again for your time and interest in posting this!!!

MarkHoyland

<?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:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:esri="http://www.esri.com/2008/ags"       creationComplete="application1_creationCompleteHandler(event)">  <fx:Script>   <![CDATA[    import com.esri.ags.Graphic;    import com.esri.ags.events.MapMouseEvent;    import com.esri.ags.geometry.MapPoint;    import com.esri.ags.symbols.TextSymbol;        import mx.events.FlexEvent;            //[Bindable]     private var graphicContextMenu:ContextMenu = new ContextMenu();        protected function application1_creationCompleteHandler(event:FlexEvent):void    {     graphicContextMenu.hideBuiltInItems();     var item:ContextMenuItem;     item = new ContextMenuItem("Delete me");     //item.enabled = true;     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); //2.5 api     //var textSymbol:TextSymbol = new TextSymbol("myTextSymbol",null,0x000000, 1, true,0,true); // newer api               var myGraphicMarker:Graphic = new Graphic(mapPoint, textSymbol);          myGraphicMarker.contextMenu = graphicContextMenu;          graphicsLayer.add(myGraphicMarker);     graphicsLayer.refresh();    }                   ]]>  </fx:Script>  <fx:Declarations>   <!-- Place non-visual elements (e.g., services, value objects) here -->  </fx:Declarations>       <esri:Map id="map" mapClick="map_mapClickHandler(event)" >   <esri:extent>    <esri:Extent xmin="-10753431" ymin="4624151" xmax="-10737799" ymax="4635884">     <esri:SpatialReference wkid="102100"/>    </esri:Extent>   </esri:extent>   <esri:ArcGISTiledMapServiceLayer id="baseLayer" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>   <esri:GraphicsLayer id="graphicsLayer"/>  </esri:Map>     </s:Application>

WilsonIonara

Thank you Mark. Where do I call the application1_creationCompleteHandler function? do i call it in the creation complete of the graphiics layer or the application? Thanks

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();
}

WilsonIonara

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

WilsonIonara

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();
  
  }

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>

WilsonIonara

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

Try this

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

WilsonIonara

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);
  
   }

WilsonIonara

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);
     
    }
   }

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.