Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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>
share|improve this question
    
I would like to make a radio button to delete feature like the navigate and draw polygon buttons if you run the code above. –  Blake Loizides Feb 7 '12 at 21:25
    
Do you want to delete it as SOON as you draw it, or do you want to delete it with another "delete" tool that you select from toolbar? I posted answer for the latter. But if that's not what you wanted I'll withdraw. –  Vadim Feb 7 '12 at 21:43
    
@CaptDragon, Maybe you could still help me with a radio button like I asked yesterday, Please, Figured out the mouseover label, Thanks –  Blake Loizides Feb 8 '12 at 11:31
add comment

2 Answers

up vote 2 down vote accepted

Here is one way.

Add this to your code:

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

    polygonLayer.events.on({
        featuresadded: function (event) {
            var confirmPolygon = function () { return confirm("Do you want to keep this polygon?") };

            if (!confirmPolygon()) {
                polygonLayer.removeFeatures(event.features);
            }

        }
    });

I'll post an update for the radio button comment/suggestion.

share|improve this answer
    
Don,t worry about the radio button, That's works just perfect for me thanks again CaptDragon. You know this stuff well hey, Don,t know where you from but you are really good at this stuff. thanks Captain Dragon. –  Blake Loizides Feb 7 '12 at 21:46
    
Going to post another question, How would just make a hover label for the circle? will post you can get it from my profile –  Blake Loizides Feb 7 '12 at 22:00
    
having some trouble with this delete function again, If you look at the above code , you,ll see that i,m trying to put an delete layer button on the map, with the delete code , but have had no luck yet, i managed to get my hover label to work, could you maybe help me with a radio/ and or image button the delete my polygon, When you have the time though, dont want to take you away from work. –  Blake Loizides Feb 8 '12 at 16:23
    
let us continue this discussion in chat –  CaptDragon Feb 8 '12 at 16:43
    
It looks like i can be answering the same question every time you work in new functionality to your application. This could be a vicious cycle for no reputation points. This site is meant to get answer/solution to a specific question/problem. You cannot drag along the question modifying it as your application is developed and you run into new problems. Create a new question. –  CaptDragon Feb 8 '12 at 16:59
show 1 more comment

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);
share|improve this answer
    
(+1) for the effort. It was a good one and would have worked as well. –  CaptDragon Feb 7 '12 at 21:52
    
haha, thanks. +1 for you as well for ... what he actually wanted. But in our case, we let you back out after you draw something, not as you're drawing it. So we just add another control to remove drawing after the fact. –  Vadim Feb 7 '12 at 22:02
    
@Vadim Please could you take a look at my code when you have some time , I run the code that you gave me but it does not work, I must be doing something wrong –  Blake Loizides Feb 8 '12 at 10:57
    
Sorry @Vadim. Please excuse my stupidity. please could you edit the answer with your original post and I will just leave it alone. I am new at this Forum, and dont know how things work yet. Please forgive me. thanks –  Blake Loizides Feb 8 '12 at 17:32
    
For how things work, please read our FAQ, Blake. –  whuber Feb 8 '12 at 19:33
add comment

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.