OpenLayers - Drawing boxes with line segments


I use OpenLayers and I am having a few issues. First issue, I would like to have the user draw boxes and saw in another thread about this that it’s currently not possible and a workaround is to draw lines. So I tried that, have the user draw a line. I wanted to have the user draw the line with two clicks (or alternatively by clicking and dragging) and use the two resulting points from the first line segment to create a box. Unfortunately the DrawingMode.LINE always creates a PolyLine. Is there a way to programmatically stop the line drawing and fire the VectorDrawnEvent after the first line segment?

Also, in the API there’s a typo, the getter and setter methods for the DrawingMode are called getDrawindMode and setDrawindMode. :slight_smile:

For my second issue, I will post a seperate thread if I can’t figure it out by myself, I just ran into it.

The simplest thing is to use DrawingMode.AREA and let the user draw the box: set 3 of 4 corners with a single mouse-click and use a double-click to set the 4th corner and close the box.
If you want to algorithmetically create a box from a single line segment, you can directly access the underlying Vector array and use the line segment values to generate a Vector array that defines a polygon (box).

Thanks for your reply.
The problem with the DrawingMode.AREA approach for me is that the user can draw an arbitrary area with an arbitrary number of points that way. As far as I’ve seen as long as the DrawngMode is active for a vector layer, the only event that I can catch is a VectorDrawnEvent, which will be fired after the double click. There won’t even be any MapClickEvents while DrawingMode is active, so there is no way to set the first three corners with a single mouse click as far as I can tell.

I do generate a box out of the underlying vector array at the moment, the problem is that unless the user doubleclicks the second point, the line drawing won’t stop there and the user can continue to build up a polyline. Of course I can just use the first two points from the array, but it still is a bad user experience. So what I am looking for is either
1.a way to draw boxes directly (would need a change of the wrapper API),
2.a way to draw lines that only consist of single line segments (as far as I can tell, would need a change of the wrapper aPI as well) or
3.a way to force a stop of the DrawingMode after the second point of the line has been set (would need a way to interfere with the DrawingMode, as far as I can see that is not possible as I can’t catch any MapClickEvents while the DrawingMode is active - is there a general MouseEvent that is still being fired during that mode? ).

Or maybe I am missing something altogether?


If you can build a version from SVN, there is now
. I also fixed
the typo in method name.


Hello Matti,

thanks for your reply! I tried out the SVN version (revision 188) and was able to draw rectangles in the demo application. Rectangles get drawn fine, but the VectorDrawnEvent won’t fire. I think you forgot to adjust the changeVariables method in the VectorLayer class. It works for me after changing line 123 from

} else if (drawingMode == DrawingMode.AREA) {


} else if (drawingMode == DrawingMode.AREA || drawingMode == DrawingMode.RECTANGLE) {

I also added a new drawing mode based on your changes for the rectangle to get support for drawing circles. In my solution, circles are approximated by 36-sided regular polygons.
I attached a patch for revision 188 that contains both the changes to the changeVariables method and the added circle drawing functionality. I hope you can use the patch, I would be happy to see the circle drawing functionality in the repository. :slight_smile:

What I am still missing is a circle around the hovering mouse cursor as visual feedback when either in circle or rectangle drawing modes, like one can see in area drawing mode when the mouse cursor hovers over the map in the current implementation. Unfortunately so far I couldn’t find where this would need to be added.
12633.txt (3.77 KB)


Patch is in SVN, thanks!

To change that “drawing indicator” you should look at Handlers in OpenLayers JS files.


Thank you, I’ll have a look at those JS files.

I checked out the lasted version from repository and i tried to draw Rectangle or Circle but i it doesn’t work :confused:


Is there any server side exception? If not, I’d make a sophisticated guess that you have forgotten to recompile (GWT compile) your widget set.


Effectively … nice shot :grin:
Thank you very much :slight_smile: