Understanding the polygon handler function in Openlayers

Question

Using openlayers, I want to be able to draw one polygon on a map. After one polygon is drawn, I want an event to fire that stops any more from being drawn until a button is pressed. My current code allows the user to draw more than one polygon and I'm trying to figure out how to limit it. This is my current code:

// Add drawing layer 
analysisLayer = new OpenLayers.Layer.Vector("analysisLayer"); 
map.addLayer(analysisLayer);
// add polygon drawing control
polygon = new OpenLayers.Control.DrawFeature(analysisLayer, OpenLayers.Handler.Polygon);
map.addControl(polygon);

What I tried doing was adding a callback to the Control.DrawFeature function as follows:

// add polygon drawing control
polygon = new OpenLayers.Control.DrawFeature(
 analysisLayer, 
 OpenLayers.Handler.Polygon, {callbacks: { "finalize" : function(){alert('poly made')} } } );
 map.addControl(polygon);

This does not work, but it does not give me an error. I'm not sure how exactly to structure this function. I did find the function finalize in the documentation which is what I thought I needed, but I'm also not sure how to structure the callback.

EDIT: I'm starting to understand how these callbacks work. For example this detects that a feature has been added (using @Vadim's advice):

// detect polygon events 
function newPolygonAdded (evt) {
 alert('Polygon completed');
 polygon.deactivate(); //stops the drawing
 } 
// add polygon drawing control
polygon = new OpenLayers.Control.DrawFeature(analysisLayer, OpenLayers.Handler.Polygon, 
 {eventListeners:{"featureadded": newPolygonAdded}}); 
map.addControl(polygon);

What I still don't understand is how to limit the drawing layer from allowing more polygons to be drawn.

Answer 1

yourControl.events.register("featureadded", ' ' , controlFeatureHandler); 
...
function controlFeatureHandler(data)
{
 // do regular stuff
 // DISABLE control to draw
 yourControl.deactivate();
}

Answer 2

I know this question was asked long ago, but since I recently had the same issue when working with DrawFeature I figured that I would provide my findings in case anybody else also had trouble.

I solved being able to manipulate the Handler's callbacks by digging through the source code. DrawFeature stores the handler instance in its "handler" property, and each handler class stores it's callbacks in the "callback" property:

var polygonLayer = new OpenLayers.Layer.Vector("Poly Layer");
map.addLayer(polygonLayer);
var polyedit = new OpenLayers.Control.DrawFeature(
 polygonLayer,
 OpenLayers.Handler.Polygon
);
// 'point' is one of the named callbacks specified by OpenLayers.Handler.Polygon
// and is called every time a point is added to the feature being drawn
polyedit.handler.callbacks.point = function(pt){
 console.log(pt)
 }
map.addControl(polyedit);
polyedit.activate();

This doesn't feel 'ideal', because it required a trip through the source code to find out what was going on but it does indeed work. Something seems wrong about the way DrawFeature and Handlers work together;

• You can't specify an already configured instance of a Handler when creating a DrawFeature
• You can't properly pass constructor arguments to a Handler when creating it via DrawFeature
• And it isn't simple to instantiate a Handler, instantiate a DrawFeature, then attach the handler - the Handler's first constructor argument is the control it belongs to, and the control can't be instantiated without passing a Handler classname in. We end up with a weird chicken and egg problem

Answer 3

I had the same problem and i tried to solve it with the answers above but it did not work for me. What actually worked is this

var polygonLayer = new OpenLayers.Layer.Vector("Polygon");
var polygon = new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon);
map.addControl(polygon);
polygon.handler.callbacks.point = function(point){
 if (polygonLayer.features.length > 0){
 polygonLayer.removeAllFeatures();
 }
 }
polygon.activate(); 
polygonLayer.events.register('featureadded', polygonLayer, onAdded);
function onAdded(ev){
 var polygon = ev.feature.geometry;
 var bounds = polygon.getBounds();
 console.log(bounds);
}
map.addLayer(polygonLayer);

I added a function to get the boundaries of the polygon. I need them for a WFS request.

Answer 4

polygon = new OpenLayers.Control.DrawFeature(
 vectorlayer, OpenLayers.Handler.Polygon, {
 callbacks: { done: function() { console.log('polygon done')} }
 }),