topic Re: Draw toolbar events in ArcGIS JavaScript Maps SDK Questions

Draw toolbar events

SarahNoakes1 — Wed, 20 May 2015 13:16:29 GMT

Hi,

I am using the Draw toolbar to allow the user to draw a polygon on the map. I want to identify when the user has started a new polygon, but the toolbar only fires two events: draw-complete and draw-end - there doesn't seem to be a draw-start event. However I know there must be something behind the scenes because the default tooltip is "Click to start drawing" before the polygon has been started, "Click to continue drawing" once the first point is set and "Double-click to complete" for all subsequent points.

Any ideas how I can grab hold of the event fired when the first point is clicked?

Thanks,

Sarah Noakes

Cornwall Council.

Re: Draw toolbar events

TimWitt2 — Wed, 20 May 2015 13:24:52 GMT

Sarah,

Could you tell us what you want to do once the user starts drawing? Maybe there is a different way?

Tim

Re: Draw toolbar events

SarahNoakes1 — Wed, 20 May 2015 13:29:28 GMT

Hi Tim,

If there is already a polygon in the graphics layer I want to remove it when the user starts to draw a new one. The only workaround I can think of at the moment is to remove the existing polygon (if there is one) when the draw-complete event fires, but I think that looks a bit clunky.

Cheers,

Sarah.

Re: Draw toolbar events

TimWitt2 — Wed, 20 May 2015 13:31:22 GMT

But if you really need it. Here is what I did in my draw tool: Javascript API - Advanced Draw widget

When the user activates the draw tool i start a map.on("click") event called draw_MapOnClick.

So when the user first clicks on the map, the map on click event does something and on draw end I remove the draw_MapOnClick event.

Hope this makes sense!

Tim

Re: Draw toolbar events

RobertScheitlin__GISP — Wed, 20 May 2015 13:33:14 GMT

EDIT: I see Tim has already covered this but I would use mouse-down and then remove it immediately to capture the first user interaction only.

Sarah,

Most developers just add a mouse-down event listener to the map when the draw is activated and then immediately remove it once it has been fired. This allows you to catch the first mouse down event whether it is a drag for a rectangle, circle, or a standard click for a point.

Re: Draw toolbar events

TimWitt2 — Wed, 20 May 2015 13:35:30 GMT

Sarah,

this is what I meant, once the draw is active and the person clicked the map, check if your tool is using a polygon. If it does, remove the other polygon and disconnect the map click event.

Tim

Re: Draw toolbar events

KenBuja — Sat, 11 Dec 2021 20:00:32 GMT

You could use the button click event to clear the map's graphic before the new feature is drawn, using something like this (from Add graphics to a map | ArcGIS API for JavaScript)

on(dom.byId("info"), "click", function(evt) {
  if ( evt.target.id === "info" ) {
    return;
  }
  map.graphics.clear();
  var tool = evt.target.id.toLowerCase();
  map.disableMapNavigation();
  tb.activate(tool);
});

Re: Draw toolbar events

TimWitt2 — Wed, 20 May 2015 13:53:09 GMT

Agreed since you only need to quickly check if a polygon exists, no need to run it long.

Re: Draw toolbar events

SarahNoakes1 — Wed, 20 May 2015 14:07:43 GMT

Thanks everyone - got it working with a couple of lines of code. I still think a draw-start event would be a sensible addition though ;o)

Re: Draw toolbar events

TimWitt2 — Wed, 20 May 2015 14:11:50 GMT

Yeah that's true. It would make it a lot easier to do some of the things, like adding measurements, with less code.

Re: Draw toolbar events

KenDoman — Wed, 20 May 2015 15:05:54 GMT

Hi Sarah,

After trying a few different methods, the best way I've been able to implement what you're describing without an onDrawBegin event is to use a dojo/on.pausable() event that goes off on the map.onmousedown event, pause it, and only unpause it when the draw-end event occurs. Here's how it would look:

require([..., "esri/map", "dojo/on", "esri/toolbars/draw", ...], function (..., Map, dojoOn, DrawToolbar, ...) {

...

var map = new Map("mapdiv", {...});

var drawtoolbar = new DrawToolbar(map, {...});

...

var clearGraphicsHandler = dojoOn.pausable(map, "mousedown", function () {

// clear the map graphics layer

map.graphics.clear();

// test if you can pause the clearGraphicsHandler after the event is called.

if (clearGraphicsHandler & typeof clearGraphicsHandler.pause === "function") {

clearGraphicsHandler.pause();

}

});

// pause it for now

clearGraphicsHandler.pause();

...

dojoOn(drawtoolbar, "draw-end", function (evt) {

// do something to add the drawing on the map.

...

// resume the clearGraphicsHandler when you touch the map to draw again.

clearGraphicsHandler.resume();

});

...

// remember if you switch away from this tool, and want to preserve the current graphic, be sure to call clearGraphicsHandler.pause();

...

});

There's more things you could do to make this more robust. Hopefully, this helps.