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

ADITIROY · ‎02-29-2016

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

MiriamBrockmann · ‎03-01-2016

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 · ‎03-01-2016

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>

<style>

html,

body,

#mapDiv {

padding: 0;

margin: 0;

height: 100%;

}

button {

display: block;

}

</style>

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>

</div>

<br />

Enter Text:

<br />

<br />Color :

<br />

</div>

<br />

<br />Angle :

<br />

<br>Font:

<br />

<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>

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

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

</div>

</body>

</html>

Regards,

Aditi

MiriamBrockmann · ‎03-01-2016

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 · ‎03-01-2016

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

MiriamBrockmann · ‎03-02-2016

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!

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

map.graphics.delete(selected);

});

</script>

</button>

Regards, Miriam

ADITIROY · ‎03-07-2016

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

TyroneBiggums · ‎03-07-2016

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 · ‎03-07-2016

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 · ‎03-07-2016

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