Draw a rectangle in JSAPI 4.x

1561
5
Jump to solution
10-07-2017 05:52 PM
JohnCartwright3
New Contributor II

Hello,

It was exciting to see the new Draw tools added in JSAPI 4.5, but I'm wondering how to limit the user to drawing a rectangle like we can do in 3.x.  Any ideas?

Thanks!

--john

0 Kudos
1 Solution

Accepted Solutions
ThomasSolow
Regular Contributor

An extent or a rectangle?  The difference is that an extent will always be oriented based on the surface of the world, whereas a rectangle could be oriented however you like.

To draw an extent, you can do something simple like this (click and drag to draw): JS Bin - Collaborative JavaScript Debugging 

I imagine extents will be added to the drawing tools at some point.

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

John,

   Currently in 4.5 there are only 3 draw actions permitted:

PointDrawAction | PolygonDrawAction | PolylineDrawAction

Drawing an extent is not mentioned at all in the Functionality Matrix but it is most likely one of those coming soon items.

0 Kudos
ThomasSolow
Regular Contributor

An extent or a rectangle?  The difference is that an extent will always be oriented based on the surface of the world, whereas a rectangle could be oriented however you like.

To draw an extent, you can do something simple like this (click and drag to draw): JS Bin - Collaborative JavaScript Debugging 

I imagine extents will be added to the drawing tools at some point.

View solution in original post

deleted-user-z9OjN-EoUVWn
New Contributor II

How can the listener be turned off after the initial extent is drawn?

0 Kudos
ThomasSolow
Regular Contributor

view.on(...) returns a handle.  The handle has a remove method, which will remove the listener.

so you could do something like: var handle = view.on("drag", ...);

and then call handle.remove() when you're done with the listener.

deleted-user-z9OjN-EoUVWn
New Contributor II

Thanks for that info.  I had to add the remove method within an additional else if condition to get it to work.

} else if (e.action === "end") {
   handle.remove();
} ;

0 Kudos