openlayers editing methods

by Thomas B.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/theme/default/style.css">
<link rel="stylesheet" href="http://dev.openlayers.org/examples/style.css">
<h1 id="title">Editing Methods</h1>
        <p id="shortdesc">
            Demonstrates the use of editing methods for manipulating geometries 
            while drawing.
        </p>
        <div id="map" class="smallmap"></div>
        <ul id="methods">
            <li><a href="#" id="insertXY">insert x,y</a></li>
            <li><a href="#" id="insertDeltaXY">insert dx,dy</a></li>
            <li><a href="#" id="insertDirectionLength">insert direction/length</a></li>
            <li><a href="#" id="insertDeflectionLength">insert deflection/length</a></li>            
            <li><a href="#" id="finishSketch">finish sketch</a></li>
            <li><a href="#" id="cancel">cancel sketch</a></li>
        </ul>

        <div id="docs">
            <p>
                The <code>control.insertXY</code> method inserts a point at the given
                map coordinates (x, y) immediately prior to the most recent point
                (under the mouse).  
                The <code>control.insertDeltaXY</code> method inserts a point at 
                the given offset values (dx, dy) from the previously added point.
                The <code>control.insertDirectionLength</code> method inserts a 
                point at offset direction and length from the previously added point.
                Direction is measured counter-clockwise from the positive x-axis.
                The <code>control.insertDeflectionLength</code> method inserts a 
                point at offset deflection and length from the previously added point.
                Deflection is measured counter-clockwise from the previous line 
                segment.
                The <code>control.finishSketch</code>...

CSS

#map
{
    height:500px;
    width:500px;
    
}

JavaScript

var map = new OpenLayers.Map({
    div: "map",
    layers: [
        new OpenLayers.Layer.OSM(),
        new OpenLayers.Layer.Vector()
    ],
    center: new OpenLayers.LonLat(12.5,52.5).transform("EPSG:4326","EPSG:3857"),
    zoom: 14
});

var draw = new OpenLayers.Control.DrawFeature(
    map.layers[1], OpenLayers.Handler.Path
);
map.addControl(draw);
draw.activate();

// handle clicks on method links
document.getElementById("insertXY").onclick = function() {
    var values = parseInput(
        window.prompt(
            "Enter map coordinates for new point (e.g. '-111, 46')", "x, y"
        )
    );
    if (values != null) {
        draw.insertXY(values[0], values[1]);
    }
};
document.getElementById("insertDeltaXY").onclick = function() {
    var values = parseInput(
        window.prompt(
            "Enter offset values for new point (e.g. '15, -10')", "dx, dy"
        )
    );
    if (values != null) {
        draw.insertDeltaXY(values[0], values[1]);
    }
};
document.getElementById("insertDirectionLength").onclick = function() {
    var values = parseInput(
        window.prompt(
            "Enter direction and length offset values for new point (e.g. '-45, 10')", "direction, length"
        )
    );
    if (values != null) {
        draw.insertDirectionLength(values[0], values[1]);
    }
};
document.getElementById("insertDeflectionLength").onclick = function() {
    var values = parseInput(
        window.prompt(
            "Enter deflection and length offset values for new point (e.g. '15, 20')", "deflection, length"
        )
    );
    if (values != null) {
        draw.insertDeflectionLength(values[0], values[1]);
    }
};
document.getElementById("cancel").onclick = function() {
    draw.cancel();
};
document.getElementById("finishSketch").onclick = function() {
    draw.finishSketch();
};

function parseInput(text) {
    var values = text.split(",");
    if (values.length !== 2) {
        values = null;
    } else {
        values[0] =...