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?

6 Answers 6


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) {
  • 1
    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. dev.openlayers.org/docs/files/OpenLayers/Control/… (layer, handler and options). But what is options? How can I learn this?
    – barteloma
    Commented Aug 11, 2014 at 14:05

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
                    this.control.layer.events.registerPriority("sketchcomplete", this, this.finalizeInteriorRing);
                    this.control.layer.events.registerPriority("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.


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

      sketchcomplete : featureComplete
  • 1
    I think you have a spelling error. "sketchcopmlete"
    – Munzilla
    Commented Jan 9, 2012 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.


OSM Draw Feature

    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css"></head>
    <style type="text/css">
        #controlToggle li {
            list-style: none;
        p {
            width: 512px;
        /* avoid pink tiles */
        .olImageLoadError {
            background-color: transparent !important;
    <div id="map" class="smallmap"></div>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, drawControls;
        function init(){
            map = new OpenLayers.Map('map');
            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
            var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
            var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
            var boxLayer = new OpenLayers.Layer.Vector("Box layer");
            map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer, boxLayer]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
            drawControls = {
                point: new OpenLayers.Control.DrawFeature(pointLayer,
                line: new OpenLayers.Control.DrawFeature(lineLayer,
                polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
                box: new OpenLayers.Control.DrawFeature(boxLayer,
                    OpenLayers.Handler.RegularPolygon, {
                        handlerOptions: {
                            sides: 4,
                            irregular: true
            for(var key in drawControls) {
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
            document.getElementById('noneToggle').checked = true;
        function toggleControl(element) {
            for(key in drawControls) {
                var control = drawControls[key];
                if(element.value == key && element.checked) {
                } else {
        function allowPan(element) {
            var stop = !element.checked;
            for(var key in drawControls) {
                drawControls[key].handler.stopDown = stop;
                drawControls[key].handler.stopUp = stop;

<body onload="init()">
    <h1 id="title">OpenLayers Draw Feature Example</h1>

    <div id="tags">
        point, line, linestring, polygon, box, digitizing, geometry, draw, drag

    <p id="shortdesc">
        Demonstrate on-screen digitizing tools for point, line, polygon and box creation.

    <div id="map" class="smallmap"></div>

    <ul id="controlToggle">
            <input type="radio" name="type" value="none" id="noneToggle"
                   onclick="toggleControl(this);" checked="checked" />
            <label for="noneToggle">navigate</label>
            <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
            <label for="pointToggle">draw point</label>
            <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
            <label for="lineToggle">draw line</label>
            <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
            <label for="polygonToggle">draw polygon</label>
            <input type="radio" name="type" value="box" id="boxToggle" onclick="toggleControl(this);" />
            <label for="boxToggle">draw box</label>
            <input type="checkbox" name="allow-pan" value="allow-pan" id="allowPanCheckbox" checked=true onclick="allowPan(this);" />
            <label for="allowPanCheckbox">allow pan while drawing</label>

    <div id="docs">
        <p>With the point drawing control active, click on the map to add a point.</p>
        <p>With the line drawing control active, click on the map to add the points that make up your line.
        Double-click to finish drawing.</p>
        <p>With the polygon drawing control active, click on the map to add the points that make up your
        polygon.  Double-click to finish drawing.</p>
        <p>With the box drawing control active, click in the map and drag the mouse to get a rectangle. Release
        the mouse to finish.</p>
        <p>With any drawing control active, paning the map can still be achieved.  Drag the map as
        usual for that.</p>
        <p>Hold down the shift key while drawing to activate freehand mode.  While drawing lines or polygons
        in freehand mode, hold the mouse down and a point will be added with every mouse movement.<p>

// 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

  • 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
    Commented Jan 6, 2012 at 7:29
  • That's correct. I misread your question.
    – Vadim
    Commented Jan 6, 2012 at 16:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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