How to Stop ArcGIS API For JavaScript Drawing After Click on Map

Question

Can you please take a look at this demo and let me know how I can stop drawing after adding the first point to the map?

as you can see I tried using the toolbar.finishDrawing();

but this is not stopping the drawing and adding new points on each click on mao

 $("#btnPoint").on("click", function () {
 toolbar = new Draw(map);
 toolbar.activate(Draw.POINT);
 map.hideZoomSlider();
 toolbar.on("draw-end", addToMap);
 function addToMap(evt) {
 var graphic = new Graphic(evt.geometry, config.symbolPointFlag);
 pGraphicsLayer.add(graphic);
 }
 toolbar.finishDrawing();
 }); 

Answer 1

Knwing In your above code you're creating the toolbar every click , and also ataching the event + creating the addToMap function , which is a bad practice ...

So what you have to do is refactoring your code :

• create your toolbar , in the main code (outside event)
• decalre addToMap function outside the event
• change your the toolbar.finishDrawing(); by toolbar.deactivate(); as @Reza mentionned

please be informed that the toolbar.finishDrawing(); will not disable the drawing toolbar it will trigger the draw-end event which is usless in case o fpoint drawing , by example if you want to stop drawing of line or polygone at a some stage , just call this last and it'ill trigger the draw end , ( draw only line with three vertices by example )

Please See a Demo Fiddle here :

Whole code (in case of fiddle loss)

HTML :

<script type="text/javascript">
 var dojoConfig = {
 async: true,
 parseOnLoad: true
 };
</script>
<div data-dojo-type="dijit/layout/BorderContainer" design="headline" splitters="false" id="DashboardContainer">
 <div data-dojo-type="dijit/layout/ContentPane" id="DashboardTop" region="top">
 <button data-dojo-type="dijit/form/Button" id="setStart" type="button">
 Set Starting Location
 </button>
 <button data-dojo-type="dijit/form/Button" id="setStop" type="button">
 Set Stopping Location
 </button>
 <button data-dojo-type="dijit/form/Button" id="clear" type="button">
 clear !
 </button>
 |
 <button data-dojo-type="dijit/form/Button" id="send" type="button">
 Send request
 </button>
 </div>
 <div data-dojo-type="dijit/layout/ContentPane" region="center" id="map" >
 </div>
</div>

JS :

require(['esri/map', "esri/toolbars/draw", "dojo/on", 'dojo/parser', 'dojo/ready', 'dijit/registry', "esri/layers/GraphicsLayer", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", 'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', ],
 function(Map, Draw, On, parser, ready, registry, GraphicsLayer, Graphic, SimpleMarkerSymbol, BorderContainer, ContentPane) {
 var map;
 var toolbar;
 var pGraphicsLayer = new GraphicsLayer({
 id: "pGraphicsLayer"
 });
 var symbol = new SimpleMarkerSymbol();
 ready(function() {
 map = new Map("map", {
 basemap: "streets",
 center: [-90, 39],
 zoom: 9
 });
 map.on("load", function() {
 toolbar = new Draw(map);
 toolbar.on("draw-end", addToMap);
 map.addLayers([pGraphicsLayer]);
 });
 On(registry.byId("btnPoint"), "click", function(e) {
 toolbar.activate(Draw.POINT);
 map.disableMapNavigation();
 });
 On(registry.byId("clear"), "click", function(e) {
 pGraphicsLayer.clear();
 });
 });
 addToMap = function(evt) {
 toolbar.deactivate();
 map.enableMapNavigation();
 pGraphicsLayer.add(new Graphic(evt.geometry, symbol));
 };
});

CSS :

#DashboardContainer {
 width: 100%;
 height: 100%;
}
#DashboardTop {
 height: 30px;
}
html,
body {
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 overflow: hidden;
}

Answer 2

In your addToMap function, add

toolbar.deactivate();

Delete the toolbar.finishDrawing(); where it is now.

Your code says once the drawing is complete, hit addToMap, thats where you need to deactivate your toolbar.