Event listeners after each plotting of a point of a Polygon Vector in OpenLayers

Question

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?

Answer 1

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());
}

Answer 2

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.

Answer 3

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

polygonLayer.events.on({
      sketchcomplete : featureComplete
});

Answer 4

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.

Answer 5

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;
        }
    </style>
    <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,
                    OpenLayers.Handler.Point),
                line: new OpenLayers.Control.DrawFeature(lineLayer,
                    OpenLayers.Handler.Path),
                polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
                    OpenLayers.Handler.Polygon),
                box: new OpenLayers.Control.DrawFeature(boxLayer,
                    OpenLayers.Handler.RegularPolygon, {
                        handlerOptions: {
                            sides: 4,
                            irregular: true
                        }
                    }
                )
            };
            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }
            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) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
        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
    </div>

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

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

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

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

Answer 6

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


}