OpenLayers 2 – Getting Coordinates of a Circle Vector after Draw

javascriptopenlayers-2polygonvector

I have made a openlayers map. I have made two features on the map.

Navigate

DRAW POLYGON

I have made 40 sides to my polygon which turns out to be a circle.

After I have drawn my circle I want to show the coordinates of the bounding box of the circle.

So after I draw a circle i want to be able show the top, left, bottom and right coordinates for that circle in a ALERT BOX?

         <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

register the featuresadded event on the layer.

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

polygonLayer.events.on({
    featuresadded: onFeaturesAdded
});

And do this on the function:

function onFeaturesAdded(event){
    var bounds = event.features[0].geometry.getBounds();
    var answer = "bottom: " + bounds.bottom  + "\n";
    answer += "left: " + bounds.left  + "\n";
    answer += "right: " + bounds.right  + "\n";
    answer += "top: " + bounds.top  + "\n";
    alert(answer);
}

or to get all vertices:

function onFeaturesAdded(event) {
    var vertices = event.features[0].geometry.getVertices();
    var strVertices = "";
    for (var x in vertices) {
        strVertices += "(" + vertices[x].x + "," + vertices[x].y + ")";
    }

    alert(strVertices);
}
Related Question