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 have made a openlayers map. I have made two features on the map.



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">
    <style type="text/css">
        html, body, #map {
            margin: 0;
            width: 100%;
            height: 100%;


    <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;


    <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, 

        // At this point the control is used as per normal            
        layer1 = new OpenLayers.Layer.WMS( 
            'Streetmaps Streets',
                key:                                    'HZPGNWPNDYPREPTIKSIHWKYKQYYOQVYX',
                service:                                'WMS',
                request:                                'GetMap',
                version:                                '1.3.0',
                layers:                                 'sm.maps.tiled',
                format:                                 'image/png'

        layer2 = new OpenLayers.Layer.WMS( 
            'Streetmaps Imagery',
                key:                                    'HZPGNWPNDYPREPTIKSIHWKYKQYYOQVYX',
                service:                                'WMS',
                request:                                'GetMap',
                version:                                '1.3.0',
                layers:                                 'sm.imagery',
                format:                                 'image/png'

        // This loads the map

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

        // 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,
            {handlerOptions: polyOptions});


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

    function setOptions(options) {

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

       <body onLoad="init()">
    <div id="map" class="smallmap"></div>
        <div id="controls">
            <ul id="controlToggle">
                    <input type="radio" name="type"
                        value="none" id="noneToggle"
                        checked="checked" />
                    <label for="noneToggle">navigate</label>
                    <input type="radio" name="type"
                        value="polygon" id="polygonToggle"
                        onclick="polygonControl.activate()" />
                    <label for="polygonToggle">draw polygon</label>
share|improve this question

1 Answer 1

up vote 5 down vote accepted

register the featuresadded event on the layer.

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

    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";

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 + ")";

share|improve this answer
Thank CaptDragon. I BOW AT YOUR GREATNESS. LEGENDARY –  Blake Loizides Feb 7 '12 at 14:59
@BlakeLoizides : You're welcome, remember to click on the check mark to give me credit for the answer :). –  CaptDragon Feb 7 '12 at 15:01
I managed to get my polygon to drag. With the code below. drag = new OpenLayers.Control.DragFeature(polygonLayer, { autoActivate: true, onComplete: function() {alert('Are you sure this is the right postion?')} }); map.addControl(drag); –  Blake Loizides Feb 7 '12 at 20:54
iv,e tried for a couple of hours now , but cant seem to get my delete function for this right. to delete my Polygon after I draw it. could you maybe help me with that. I would gladly ask the questions so that you can get a rating if you would like. You were such great help. –  Blake Loizides Feb 7 '12 at 20:57
Just a small correction. In the second case to get vertices, call getVertices() instead of getBounds() –  Imad Jan 18 at 13:12

Your Answer


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.