[OpenLayers-Users] any click events in Control.DrawFeature while drawing polygon

Tue Jun 12 19:13:23 EDT 2007

  Richard Duivenvoorde wrote:
> Hi,
>
> I'm using the DrawFeature control to let users define linestrings. I can 
> capture the doubleclick event (for ending the line) using 
> lineLayer.onFeatureInsert
>
> But I cannot find a way to check something WHILE clicking/adding the 
> segments. Actually on the addition of every segment I want to be able to 
> count the number of segments, because I want to be sure the will be not 
> more then 20 segments in certain lines.
>   
OpenLayers.Handler.Path  has two callback "done" and "point". The latter 
is called for every point added to the path while the user is drawing on 
the map.
Here is the "draw-feature.html" example from openlayers distribution 
slightly modified to show you how attach your custom defined callback 
handler
(see the comment into javascript code)
Regards,
Saverio Rutigliano


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
        #map {
            width: 512px;
            height: 350px;
            border: 1px solid gray;
        }
        #controlToggle li {
            list-style: none;
        }
        p {
            width: 512px;
        }
    </style>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        <!--
        var map, drawControls;
        OpenLayers.Util.onImageLoadErrorColor = "transparent";
        function init(){
            map = new OpenLayers.Map('map');
           
            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://labs.metacarta.com/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");

            map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
           
            var options = {handlerOptions: {freehand: true}};
           
// HERE YOU SPECIFY THE ADDITIONAL callbacks PROPERTY WITH CALLBACK 
HANDLER AVAILABLE FOR THE OpenLayers.Handler.Path (i.e. done and point)
            var pathDrawFeatureOptions = {
                        callbacks : {"done": doneHandler, "point": 
pointHandler},
                        handlerOptions: {freehand: true}};           
                       
            drawControls = {
                point: new OpenLayers.Control.DrawFeature(pointLayer,
                            OpenLayers.Handler.Point),
                           
                line: new OpenLayers.Control.DrawFeature(lineLayer,
                            OpenLayers.Handler.Path, 
pathDrawFeatureOptions), // specify the custom "pathDrawFeatureOptions"
                           
                polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
                            OpenLayers.Handler.Polygon, options)
            };
           
            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }
           
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
           
            document.getElementById('noneToggle').checked = true;
        }
       
// HERE YOU SPECIFY THE CALLBACK HANDLERS: doneHandler()  CALLED WHEN 
USER FINISHES THE PATH AND pointHandler()  CALLED FOR EVERY POINT ADDED
// BTW:  console.log IS THE FIREBUG METHOD TO WRITE DIRECTILY TO THE 
CONSOLE... JUST FOR DEBUG
        function doneHandler(lineGeom) {
            console.log("doneHandler:" + lineGeom.getComponentsString());
        }
        var gPointCount = 0;
        function pointHandler(aPoint) {         
            gPointCount++;
            console.log("pointHandler:point n." + gPointCount + " geom = 
" + aPoint.toShortString());
        }
       
        function toggleControl(element) {
            for(key in drawControls) {
                var control = drawControls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
        // -->
    </script>
  </head>
  <body onload="init()">
    <h1>OpenLayers Draw Feature Example</h1>
    <div id="map"></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>
    </ul>
    <p>Feature digitizing is in freehand mode by default.  In freehand 
mode, the mouse is treated as a pen.
    Drawing begins on mouse down, continues with every mouse move, and 
ends with mouse up.</p>
    <p>To turn freehand mode off, hold down the shift key while 
digitizing.  With freehand mode off, one
    vertex is added with each click and double-clicks finish drawing.  
Freehand mode can be toggled on and off
    at any time while drawing.</p>
       
  </body>
</html>