topic Re: select a text graphics (annotation)on map and delete it arcgis javascript in ArcGIS JavaScript Maps SDK Questions

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

ADITIROY — Tue, 01 Mar 2016 06:34:58 GMT

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

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

MiriamBrockmann — Tue, 01 Mar 2016 10:42:12 GMT

Have a look at this sample:

Display context menu | ArcGIS API for JavaScript

It discribes how you can select and delete a Graphic.

Regards

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

ADITIROY — Tue, 01 Mar 2016 11:40:02 GMT

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

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

MiriamBrockmann — Tue, 01 Mar 2016 12:42:05 GMT

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.

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

ADITIROY — Wed, 02 Mar 2016 04:44:02 GMT

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

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

MiriamBrockmann — Wed, 02 Mar 2016 10:43:53 GMT

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

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

ADITIROY — Mon, 07 Mar 2016 10:46:46 GMT

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

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

TyroneBiggums — Mon, 07 Mar 2016 11:15:53 GMT

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.

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

MiriamBrockmann — Mon, 07 Mar 2016 11:40:54 GMT

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

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

ADITIROY — Tue, 08 Mar 2016 05:15:58 GMT

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

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

MiriamBrockmann — Tue, 08 Mar 2016 08:54:04 GMT

Hi Aditi!

No, it wont do when you copy the code one to one. There are two possible ways :

1. You can highlight the Points, where the Text is anchord or

2. change the Textcolor by looping through the selected Geometries and change the Textcolor.

Regards

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

ADITIROY — Tue, 08 Mar 2016 09:49:24 GMT

Thank you Miriam,

But is there any code which can be integrated to this code below to make selection work instead on button click, it will work by drawing rectangle on the text graphic and highlighting the selected text.

on(dom.byId("select"), "click", function () {

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

that.selected = evt.graphic;

});

Thank you again.

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

MiriamBrockmann — Tue, 08 Mar 2016 11:08:04 GMT

There's no code i can offer you, which you can copy and paste.

I would suggest you write a Shedule what you want to program, what should happend when in which Order, which tools you need for and then write your code.

Above is all you need to do what you want.