Have a look at this sample:
Display context menu | ArcGIS API for JavaScript
It discribes how you can select and delete a Graphic.
Regards
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
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.
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
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
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
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.
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
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