[GIS] How to delete polygon in Openlayers

javascriptopenlayers-2polygon

I would like to delete my polygon in Openlayers after i have drawn it. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        html, body, #map {
            margin: 0;
            width: 100%;
            height: 100%;
        }

    </style>

    <style type="text/css">
        #controls {
            width: 512px;
            position: absolute;
            bottom: 1em;
            left: 1em;
            width: 512px;
            z-index: 20000;
            background-color: white;
            padding: 0 0.5em 0.5em 0.5em;
        }
        #controlToggle {
            padding-left: 1em;
        }
        #controlToggle li {
            list-style: none;
        }

    </style>

    <script src="js/firebug.js"></script>
    <script src="http://www.openlayers.org/dev/OpenLayers.js"></script>

    <script type="text/javascript">

    var lon = 24.0000000000; 
    var lat = -29.000000000000;

    var zoom = 4;
    var map, layer, vectors, controls;

    function init(){

        // Because the Streetmaps system uses 300x300 tiles, we need to set up the scaling variables to work with these
        var aRes =     [90,45,22.500000,11.250000,5.625000,2.812500,1.406250,0.703125,0.351563,0.175781,0.087891,0.043945,       0.021973,0.010986,0.005493,0.002747,0.001373,0.000687,0.000343];
        for (var l=0;l<aRes.length;l++) { 
            aRes[l] = aRes[l]/300; 
        }

        // Normal init, but we pass through the info about the zoom/scaling as options
        map = new OpenLayers.Map( 'map', 
        { 
            tileSize: new OpenLayers.Size(300, 300), 
            projection: 'CRS:84', 
            numZoomLevels: aRes.length, 
            resolutions:aRes, 
            maxResolution:360/300 
        });

        // At this point the control is used as per normal            
        layer1 = new OpenLayers.Layer.WMS( 
            'Streetmaps Streets',
            'http://www.streetmaps.co.za/WMS/?',
            {
                key:                                    'HZPGNWPNDYPREPTIKSIHWKYKQYYOQVYX',
                service:                                'WMS',
                request:                                'GetMap',
                version:                                '1.3.0',
                layers:                                 'sm.maps.tiled',
                format:                                 'image/png'
            }
        );

        layer2 = new OpenLayers.Layer.WMS( 
            'Streetmaps Imagery',
            'http://www.streetmaps.co.za/WMS/?', 
            {
                key:                                    'HZPGNWPNDYPREPTIKSIHWKYKQYYOQVYX',
                service:                                'WMS',
                request:                                'GetMap',
                version:                                '1.3.0',
                layers:                                 'sm.imagery',
                format:                                 'image/png'
            }
        );

        // This loads the map
        map.addLayer(layer1);
        map.addLayer(layer2);

        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
        map.addControl( new OpenLayers.Control.LayerSwitcher() );
        var vectors = new OpenLayers.Layer.Vector("vector", {isBaseLayer: true});
        map.addLayers([vectors]);

        // This loads the overlays
        var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
            "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}); 

        var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");

        map.addLayers([wmsLayer, polygonLayer]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.addControl(new OpenLayers.Control.MousePosition());

        polyOptions = {sides: 40};
        polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer,
            OpenLayers.Handler.RegularPolygon,
            {handlerOptions: polyOptions});

        map.addControl(polygonControl);          

        document.getElementById('noneToggle').checked = true;
        document.getElementById('irregularToggle').checked = false;
    }

    function setOptions(options) {
        polygonControl.handler.setOptions(options);
    }

    function toggleControl(element) {
        for(key in controls) {
            var control = controls[key];
            if(element.value == key && element.checked) {
                control.activate();
            } else {
                control.deactivate();
            }
        }
    }

       </script>
       </head>
       <body onLoad="init()">
    <div id="map" class="smallmap"></div>
        <div id="controls">
            <ul id="controlToggle">
                <li>
                    <input type="radio" name="type"
                        value="none" id="noneToggle"
                        onclick="polygonControl.deactivate()"
                        checked="checked" />
                    <label for="noneToggle">navigate</label>
                </li>
                <li>
                    <input type="radio" name="type"
                        value="polygon" id="polygonToggle"
                        onclick="polygonControl.activate()" />
                    <label for="polygonToggle">draw polygon</label>
                </li>
            </ul>          
        </div>
          </div>
        </body>
     </html>

Best Answer

Few steps, but pretty simple and logical

1) Add a new selectFeature control to have user select item you want to delete. Up to you if you want to prompt the user "are you sure?" or just delete it. You'll have to define a CSS class and include the icon

[Sorry if some brackets below are mis-aligned, I had to remove a bunch of internal code]

deleteShape = new OpenLayers.Control.SelectFeature(
    p_layer, 
    {
        displayClass: "olControlDelete",
        title: deleteFeature,
        eventListeners: {
            featurehighlighted: function overlay_delete(event) {
                var feature = event.feature;
                if( confirm(strConfirmMessage) ) { // prompt
                    p_layer.removeFeatures( [ feature ] );
                    // TODO other clean up - remove popups or send some ajax to server.  Up to you....

                }
            }
        }   
    } 
);

2) Add the control to your map or to the toolbar

3) Optionally you can modify the styleMap to have another style for "delete style"

var styleDELETE = new OpenLayers.Style({
    display: "none"
});

var styleMap1 = new OpenLayers.StyleMap( {
    "default" : styleDEFAULT
    , "select" : styleSELECT
    , "temporary" : styleTEMPORARY
    , "delete" : styleDELETE
});

Still having a bit of trouble i used the following code:

         <style type="text/css">

.olControlDelete {
     background-image: url("help.png"); 
     background-repeat:no-repeat;
     background-attachment:fixed;
     background-position:center; 
                     }
</style>


         deleteShape = new OpenLayers.Control.SelectFeature(
polygonLayer, 
{
    displayClass: "olControlDelete",
    title: deleteFeature,
    eventListeners: {
        featurehighlighted: function overlay_delete(event) {
            var feature = event.feature;
            if( confirm(strConfirmMessage) ) { // prompt
                polygonLayer.removeFeatures( [ feature ] );
                // TODO other clean up - remove popups or send some ajax to   server.  Up to you....

            }
        }
    }   
} 
);

               map.addControl(deleteShape);
Related Question