Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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.

share|improve this question

3 Answers 3

up vote 5 down vote accepted
yourControl.events.register("featureadded", ' ' , controlFeatureHandler); 
...

function controlFeatureHandler(data)
{
    // do regular stuff


    // DISABLE control to draw
    yourControl.deactivate();
}
share|improve this answer
1  
Thanks @Vadim - finally got it to work. –  djq Jan 19 '12 at 16:54

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
share|improve this answer
polygon = new OpenLayers.Control.DrawFeature(
             vectorlayer, OpenLayers.Handler.Polygon, {
                callbacks: { done: function() { console.log('polygon done')} }
          }),
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.