select a text graphics (annotation)on map and delete it arcgis javascript

2435
12
02-29-2016 10:34 PM
ADITIROY
New Contributor III

Hello,

I have graphics on the map and i just want to delete the selected text graphics on button click. Please suggest how to do this.

Thanks for help.

Regards,

Aditi

Tags (3)
0 Kudos
12 Replies
MiriamBrockmann
Occasional Contributor

Have a look at this sample:

Display context menu | ArcGIS API for JavaScript

It discribes how you can select and delete a Graphic.

Regards

ADITIROY
New Contributor III

Thank You Miriam,

                              I have tried the code but its not working. Check help. I want to select the graphic and the delete it through button click and not by right clicking on the graphic.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

    <title>Create a Map</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">

    <style>

        html,

        body,

        #mapDiv {

            padding: 0;

            margin: 0;

            height: 100%;

        }

        button {

            display: block;

        }

    </style>

    <script src="http://js.arcgis.com/3.10/"></script>

    <script>

        var map, tb, ctxMenuForGraphics;

        require([

            "esri/map", "esri/toolbars/draw", "esri/geometry/Point", "esri/geometry/Polygon", "esri/toolbars/edit",

            "esri/geometry/jsonUtils", "dijit/Menu", "dijit/MenuItem", "dijit/MenuSeparator",

            "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",

            "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",

            "esri/graphic", "esri/Color", "dojo/dom", "dojo/on", "dojo/parser",

            "dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox",

            "dijit/layout/TabContainer", "dijit/form/NumberSpinner", "dijit/form/TextBox", "dijit/ColorPalette",

            "dojo/domReady!"

        ], function (

          Map, Draw, Point, Polygon,

      Edit, geometryJsonUtils, Menu, MenuItem, MenuSeparator,

          SimpleMarkerSymbol, SimpleLineSymbol,

          PictureFillSymbol, CartographicLineSymbol,

          Graphic,

          Color, dom, on, parser

        ) {

            parser.parse();

            map = new Map("mapDiv", {

                basemap: "streets",

                center: [-25.312, 34.307],

                zoom: 3

            });

            map.on("load", initToolbar);

            createGraphicsMenu();

            ctxMenuForMap.startup();

            ctxMenuForMap.bindDomNode(map.container);

            //map.on("resize", resizeMap);

            function initToolbar() {

                tb = new Draw(map);

                tb.on("draw-end", addToMap);

                // event delegation so a click handler is not

                // needed for each individual button

                on(dom.byId("info"), "click", function (evt) {

                    if (evt.target.id === "info") {

                        return;

                    }

                    var tool = evt.target.id.toLowerCase();

                    if (tool == "clear") {

                        map.graphics.clear();

                        map.enableMapNavigation();

                    } else {

                        //map.disableMapNavigation();

                        tb.activate(tool);

                    }

                });

            }

            function addToMap(evt) {

                //deactivate the toolbar and clear existing graphics

                tb.deactivate();

                map.enableMapNavigation();

                var font = new esri.symbol.Font();

                font.setSize(parseInt(dojo.byId("tsSize").value));

                font.setFamily(parseInt(dojo.byId("tsWeight").value));

                var symbol = new esri.symbol.TextSymbol();

                symbol.setText(dojo.byId("tsText").value);

                symbol.setColor(new dojo.Color(dijit.byId("tsColor").value));

                symbol.setFont(font);

                symbol.setAngle(parseInt(dojo.byId("tsAngle").value));

                map.graphics.add(new Graphic(evt.geometry, symbol));

            }

            function createGraphicsMenu() {

                // Creates right-click context menu for GRAPHICS

                ctxMenuForGraphics = new Menu({});

               

              

              

                ctxMenuForGraphics.addChild(new MenuSeparator());

                ctxMenuForGraphics.addChild(new MenuItem({

                    label: "Delete",

                    onClick: function () {

                        map.graphics.remove(selected);

                    }

                }));

                ctxMenuForGraphics.startup();

                map.graphics.on("mouse-over", function (evt) {

                    // We'll use this "selected" graphic to enable editing tools

                    // on this graphic when the user click on one of the tools

                    // listed in the menu.

                    selected = evt.graphic;

                    // Let's bind to the graphic underneath the mouse cursor

                    ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode());

                });

                map.graphics.on("mouse-out", function (evt) {

                    ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode());

                });

            }

        });

    </script>

</head>

<body class="claro">

    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width:100%; height:100%;">

        <div id="mapDiv" dojotype="dijit.layout.ContentPane" region="center" style="margin:5px;">

        </div>

        <div dojotype="dijit.layout.TabContainer" region="right" style="width:25%;margin:5px;">

            <div dojotype="dijit.layout.ContentPane" selected="true" title="Symbol Properties">

                <br />

                Enter Text:

                <input dojotype="dijit.form.TextBox" value="Text" id="tsText" />

                <br />

                <br />Color :

                <br />

                <div id="colorButton" style="background-color: #FFFFFF; border-color: black; border-width: 1px;" dojotype="dijit/form/DropDownButton">

                    <span id="colorText"> <span id="colorSwatch" style="height: 10px; width: 10px; border: 1px solid black; background-color: black;">  </span></span>

                    <div data-dojo-type="dijit/TooltipDialog" id="colorPaletteDialog" title="Color Palette">

                        <div data-dojo-type="dijit/ColorPalette" id="tsColor"></div>

                    </div>

                </div>

                <br />

                <br />

                <br />Angle :

                <br />

                <input dojotype="dijit.form.NumberSpinner" value="0" constraints="{min:-360,max:360}" id="tsAngle" />

                <br>Font:

                <br />

                <select id="tsWeight" dojotype="dijit.form.ComboBox" autocomplete="false" value="WEIGHT_NORMAL">

                    <option value="Arial">Arial</option>

                    <option value="Times New Roman" selected>Times New Roman</option>

                    <option value="Garamond">Garamond</option>

                </select>

                <br />Size :

                <br />

                <select id="tsSize" dojotype="dijit.form.ComboBox" autocomplete="false" value="14pt">

                    <option>10pt</option>

                    <option>12pt</option>

                    <option selected="selected">14pt</option>

                    <option>16pt</option>

                    <option>18pt</option>

                    <option>20pt</option>

                    <option>22pt</option>

                    <option>24pt</option>

                    <option>26pt</option>

                    <option>28pt</option>

                    <option>30pt</option>

                </select>

                <br /><br />

                <div id="info">

                    <button id="Point" class="btn-blue" style="margin-left:90px;">Text</button><br />

                    <button id="Clear" class="btn-blue" style="margin-left:60px;">Clear Graphics</button>

                    <br /><br />

                    <button onclick="myFunction()">Click me</button>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

Regards,

Aditi

MiriamBrockmann
Occasional Contributor

Hi Aditi!

Here's a simple Codesnippet how you can remove the selected Graphic from your Map.

First draw your Geometry. The Hover the graphic and catch the event. I catch the onClick-Evt here.

     map.graphics.on("click",function(evt){

          selected = evt.graphic;

          map.graphics.remove(selected);

     });

So, by clicking on the drawn Geometry it will get selected and removed from the map.

It should be easy to bind this to a Button. You only have to submit the selected Geometry,

that is written into the Variable.

The it should look like:

myButton.on("click",function(){
      map.graphics.remove(selected);
});

and Voila...Graphic is removed.

ADITIROY
New Contributor III

Dear Sir,

Thank you. But i have to select only the text  graphic at first and this onclick event will be allowed on click of a button. Can you help how to do that in the above code.

Thanks,

Aditi

0 Kudos
MiriamBrockmann
Occasional Contributor

Hello Aditi!

Textgraphic always comes with a Point, so you can select the Point and then delete the Text.

So let me sum your affords:

     1. You want to produce a Textgraphic ( A Point with a Label )

     2. You want to select that specific Graphic

          and

     3. You want to delete that Text by selecting it and the remove it.

Right?

Question is...how do you want to select that Text? By clicking on the Ancorpoint, by hover over the text?

Or do you want to select all Text/Point Graphic at once and then choose which one to delete?

I'm not realy sure what you are up to.

Here's a workarround how to you can bind the onClick-Event in your example above declarativly:

<button data-dojo-type="dijit/form/Button" type="button">Delete selected!

   <script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">

        require(["dojo/dom"], function(dom){

                    map.graphics.delete(selected);

            });

   </script>

</button>

Regards, Miriam

0 Kudos
ADITIROY
New Contributor III

Thank you Miriam.

I have another query. I could  select graphic on the map click but now instead i want to draw a rectangle on the map for selection and selected graphic will be highlighted and then i will delete it on buttton click.

Thank for any further help.

Aditi

0 Kudos
TyroneBiggums
Occasional Contributor III

To highlight a graphic, I create a new graphic with the same geometry but I make the simplelinemarker yellow. Then when you delete the selected graphic, remove both the new yellow graphic and the graphic you selected.

MiriamBrockmann
Occasional Contributor

Hi Aditi!

Thers's a nice Example from Esri that soes exactly what you want.

Seelcting Point within a drawn Extent.

Select graphic points within an extent | ArcGIS API for JavaScript

Have a look!

Regards, Miriam

ADITIROY
New Contributor III

Hi Miriam,

I have checked the sample before but it is not changing the color of the text symbol when selected , so not able to understand it is selected or not.

Regards,

Aditi

0 Kudos