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

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

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

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>

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..)
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.