1

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>
Improve this question
3
  • 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
    Commented Feb 7, 2012 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
    Commented Feb 7, 2012 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
    Commented Feb 8, 2012 at 11:31

2 Answers 2

Reset to default
6

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);
Improve this answer
6
  • (+1) for the effort. It was a good one and would have worked as well.
    – CaptDragon
    Commented Feb 7, 2012 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
    Commented Feb 7, 2012 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
    Commented Feb 8, 2012 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
    Commented Feb 8, 2012 at 17:32
  • For how things work, please read our FAQ, Blake.
    – whuber
    Commented Feb 8, 2012 at 19:33
4

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.

Improve this answer
6
  • 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
    Commented Feb 7, 2012 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
    Commented Feb 7, 2012 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
    Commented Feb 8, 2012 at 16:23
  • let us continue this discussion in chat
    – CaptDragon
    Commented Feb 8, 2012 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
    Commented Feb 8, 2012 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.