Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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);
var editControl = new OpenLayers.Control.ModifyFeature(polygonLayer);

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

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) {
share|improve this answer
thanks for your solution, it worked for me. But I am learning OpenLayers API and I see that API is not very clear document. Because I am looking OpenLayers.Control.DrawFeature page, page says DrawFeature constructor takes 3 parameters.… (layer, handler and options). But what is options? How can I learn this? – barteloma Aug 11 '14 at 14:05
up vote 2 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,
            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
          "sketchcomplete", this, this.finalizeInteriorRing);
          "sketchmodified", this, this.enforceTopology);
                    this.polygon = polygon;
                    this.drawingHole = true;
        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{
      sketchcomplete : featureComplete
share|improve this answer
I think you have a spelling error. "sketchcopmlete" – Munzilla Jan 9 '12 at 18:31

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
// add handler to the conrol that creates your features.  
// you can add same handler to all the diff controls (point, poly, etc..)'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


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.