ArcGIS JavaScript Hacks: Draw Toolbar draw-begin event

ESRI Draw Toolbar I’ve got another ArcGIS JavaScript API hack for you, and this time we’re going to look at the draw toolbar, a tool used to interactively draw graphics on a web map. This post was inspired by a question I was pulled in on over at ESRI’s Geonet. The question revolved around capturing the beginning of drawing on the map using the draw toolbar. While the draw toolbar does a good job of capturing the end of the drawing event, it doesn’t offer the same hooks at the beginning.

The draw toolbar is a simple tool for drawing on the map, but it could use a little more API loving. The variety of drawing geometries is good, ranging from points, lines, polygons, to arrows, circles, and triangles. You can collect the drawn geometry after it’s done through the “draw-end” or “draw-complete” events, but there’s no other event hooks for this tool. While the tooltips that guide you while you draw on the map hint at other events, they’re just not not exposed in the current version of the API (3.13).

After a bit of tinkering, I was able to cobble together a system that would let you catch the first map mouse-down event after the draw toolbar was either activated, or after the toolbar finished drawing the last item. Once I successfully rigged the events to work, I attempted to extend the draw toolbar through a custom module, to contain existing and new events. I kept running into errors when adding the extra event handlers into the draw toolbar constructor, so I gave up that route. Here’s what I came up with.

In the code above, a pausable map mouse-down event is created to tell the draw toolbar to emit our custom “draw-begin” event. We immediately pause the event after it’s created. The event is resumed after the draw toolbar is activated, and after it finished drawing something on the map. The event pauses after the tool is deactivated, and within the map mouse-down event handler.

If you’ve looked over the ArcGIS JavaScript API enough, you’ll notice that the “activate” and “deactivate” events aren’t documented. Yeah, it took a little digging through minified code to dig those events out. With any use of undocumented features, use at your own risk. Who knows if the code will work in the next API version? But I’ve seen them in the API code since at least 3.10, so I’m hoping it’ll stay.

For an example of this “draw-begin” functionality, I put up a sample on CodePen. I tweaked the draw toolbar sample provided by ESRI. In my sample, the graphics already drawn on the map change to a random color. About 10 drawings in, it looks like quite the party. Note that the color changes occur when you start to draw a new graphic.

Color change on draw begin example on CodePen

Special thanks goes out to Rene Rubalcava (a.k.a. odoenet) for recommending the github plugin that lets me publish gists on my site. If you’re reading this and you haven’t checked his site out, you should.

Leave a Reply

Your email address will not be published. Required fields are marked *