Draw toolbar events

5632
10
Jump to solution
05-20-2015 06:16 AM
SarahNoakes1
Occasional Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
TimWitt2
MVP Regular Contributor

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

View solution in original post

10 Replies
TimWitt2
MVP Regular Contributor

Sarah,

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

Tim

0 Kudos
SarahNoakes1
Occasional Contributor

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.

0 Kudos
KenBuja
MVP Honored Contributor

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);

});

TimWitt2
MVP Regular Contributor

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

View solution in original post

RobertScheitlin__GISP
MVP Esteemed Contributor

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.

TimWitt2
MVP Regular Contributor

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

0 Kudos
TimWitt2
MVP Regular Contributor

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

0 Kudos
SarahNoakes1
Occasional Contributor

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)

0 Kudos
TimWitt2
MVP Regular Contributor

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