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.

I am quite new to OpenLayers. I have a polygonLayer for users to draw polygon vectors. The plotting feature is working fine.

polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
map.addLayers([ polygonLayer ]);
var polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon);
map.addControl(polygonControl);
polygonControl.activate();
var editControl = new OpenLayers.Control.ModifyFeature(polygonLayer);
map.addControl(editControl);
editControl.activate(RESIZE);

What I want to do is to have event listeners after each plotting of a point. Supposedly, I want to show popups to assist the user in between each point of plotting. How could I achieve it?

share|improve this question

5 Answers 5

Here's a simple way to get the coordinates of points as you draw them:

// Pass these options to the DrawFeature constructor:
var drawOptions = {
    callbacks : {
        "done": doneHandler,
        "point": pointHandler
    },
};

drawControls = {
    point: new OpenLayers.Control.DrawFeature(pointLayer, OpenLayers.Handler.Point),
    line: new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path, drawOptions),
    polygon: new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon, drawOptions)
};

// called when the feature is complete (double-clicked)
function doneHandler(lineGeom) {
    console.log("DONE:" + lineGeom.getVertices());
}


// called on each point drawn    
function pointHandler(aPoint) {
    console.log(aPoint.toString());
}
share|improve this answer

In the first line of your custom addPoint just enter this:

OpenLayers.Handler.Path.prototype.addPoint.apply(this, arguments);

this could run the original code.

share|improve this answer
up vote 1 down vote accepted

After spending some time, I managed to achieve the result, but still, I think the way I did it is quite "dirty".

Instead of initiating polygonControl with default OpenLayers.Handler.Polygon handler, I created a custom handler and responding to addPoint

var customHandler = new OpenLayers.Class(OpenLayers.Handler.Polygon, {
    addPoint : function(pixel) {
       console.log("A point has been added");
    }
});

At this point, I believe the default addPoint functionalities of drawing polygons are destroyed. So, what I did is just copying back all the codes under addPoint method, which results in

 var customHandler = OpenLayers.Class(OpenLayers.Handler.Polygon, {
    addPoint: function(pixel) {

        // Here is my magic
        console.log("A point has been added");

        if (!this.drawingHole && this.holeModifier && this.evt && this.evt[this.holeModifier]) {
            var geometry = this.point.geometry;
            var features = this.control.layer.features;
            var candidate,
            polygon;
            for (var i = features.length - 1; i >= 0; --i) {
                candidate = features[i].geometry;
                if ((candidate instanceof OpenLayers.Geometry.Polygon || candidate instanceof OpenLayers.Geometry.MultiPolygon) && candidate.intersects(geometry)) {
                    polygon = features[i];
                    this.control.layer.removeFeatures([polygon], {
                        silent: true
                    });
                    this.control.layer.events.registerPriority("sketchcomplete", this, this.finalizeInteriorRing);
                    this.control.layer.events.registerPriority("sketchmodified", this, this.enforceTopology);
                    polygon.geometry.addComponent(this.line.geometry);
                    this.polygon = polygon;
                    this.drawingHole = true;
                    break;
                }
            }
        }
        OpenLayers.Handler.Path.prototype.addPoint.apply(this, arguments);
    }
});

and use that handler in

var polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer, customHandler);

It seems to give me what I want. Even though it probably isn't the right way of doing it. Perhaps, someone could enlighten me how can I properly "override" the addPoint method. Thanks in advance.

share|improve this answer

you can use the sketchcomplete event if it is applicable for you

polygonLayer.events.on({
      sketchcomplete : featureComplete
});
share|improve this answer
1  
I think you have a spelling error. "sketchcopmlete" –  Munzilla Jan 9 '12 at 18:31
// add handler to the conrol that creates your features.  
// you can add same handler to all the diff controls (point, poly, etc..)
polygonControl.events.register('featureadded', ' ', myFuncFeatureAddHandler);
...    
function myFuncFeatureAddHandler(data)
{
   if(data && data.type && data.type == 'featureadded')
    {
        var newFeature = data.feature;
            // TODO - do whatever with the new feature or display popup


}
share|improve this answer
    
Correct me if I'm mistaken, featureadded event for OpenLayers.Handler.Polygon will only trigger after a full polygon has been drawn. Not after each point by point, right? Not exactly, what I want –  Kaung Htet Zaw Jan 6 '12 at 7:29
    
That's correct. I misread your question. –  Vadim Jan 6 '12 at 16:40

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.