kylethompson/OL Add-Remove

## OL Add-Remove
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js" type="text/javascript">
        </script>
        <script defer="defer" type="text/javascript">
        	var map;
        	function init(){
        		var bounds = new OpenLayers.Bounds(
        		-180, -90,
        		180, 83.624
        		);

            	var options = {
            		controls: [],
            		maxResolution: 1153.3712158203125,
                    projection: "EPSG:27700",
                    scales: [100,250,500,1000,2500,5000,10000,25000,50000,100000,250000,500000,1000000,2500000,5000000],
            		units: 'm',
                    maxExtent: new OpenLayers.Bounds([-102939.64689284, -202405.82895124, 1137403.1062222, 766617.82777766])
            		};

            	map = new OpenLayers.Map('map', options);

                var wmsOSMLayer = new OpenLayers.Layer.OSM();
                var vectorLayer = new OpenLayers.Layer.Vector("Drawing Layer");

            	map.addLayers([wmsOSMLayer, vectorLayer]);
            	map.addControl(new OpenLayers.Control.PanZoomBar());
            	map.addControl(new OpenLayers.Control.Navigation());

                pointDrawControl = new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Point, {
                    eventListeners : {'featureadded': newFeatureAdded}
                });

                dragFeature = new OpenLayers.Control.DragFeature(vectorLayer,
                {
                    onStart:function (feature, pixel){
                        //Do stuff
                    }
                    ,
                    onComplete: function(feature, pixel){
                        //Do stuff
                    }
                });

                OpenLayers.Control.ListenToClick = OpenLayers.Class(OpenLayers.Control, {
                    defaultHandlerOptions: {
                        'single': true,
                        'pixelTolerance': 0,
                        'stopSingle': false
                    },

                    initialize: function(options) {
                        this.handlerOptions = OpenLayers.Util.extend(
                            {}, this.defaultHandlerOptions
                        );
                        OpenLayers.Control.prototype.initialize.apply(
                            this, arguments
                        );
                        this.handler = new OpenLayers.Handler.Click(
                            this, {
                                'click': this.onClick
                            }, this.handlerOptions
                        );
                    },

                    onClick: function(evt) {
                        if(evt.toElement.hasOwnProperty('_geometryClass')) {
                            vectorLayer.removeFeatures(vectorLayer.getFeatureById(evt.toElement._featureId));
                                pointDrawControl.deactivate();
                                ctmControl.deactivate();
                                dragFeature.activate();
                        }
                    }
                });

                ctmControl = new OpenLayers.Control.ListenToClick({
                    handlerOptions: {
                        'single': true,
                        'pixelTolerance': 0,
                        'stopSingle': false
                    }
                });
                map.addControl(ctmControl);

                map.addControl(pointDrawControl);
                map.addControl(dragFeature);

                pointDrawControl.activate();
            	map.zoomToMaxExtent();

                function newFeatureAdded(feature){
                    pointDrawControl.deactivate();
                    ctmControl.deactivate();
                    dragFeature.activate();
                }
	       }

           function addPoint(){
                dragFeature.deactivate();
                ctmControl.deactivate();
                pointDrawControl.activate();
           }

           function removePoint(){
                dragFeature.deactivate();
                pointDrawControl.deactivate();
                ctmControl.activate();
           }
        </script>
    </head>
    <body onload="init()">
        <div id="map" style="height : 500px; width : 1200px">
        </div>
        <button onclick="addPoint()" >Add Point</button>
        <button onclick="removePoint()">Remove Point</button>

    </body>
</html>