0

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();
 });  
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;
}
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.