[OpenLayers-Users] How do I get my polygon coordinates?

Tue Feb 7 07:18:55 EST 2012

I have created a map with create circle now after you draw the circle I want the
coordinates of the circle.

Please help? 

<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: 300px;
            z-index: 20000;
            background-color: #8194D5;
            padding: 0 0.5em 0.5em 0.5em;
        }
        #controlToggle {
            padding-left: 1em;
        }
        #controlToggle li {
            list-style: none;
        }
    </style>

<link rel="stylesheet" href="theme/default/style.css" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<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 overlays

            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.addControl(new OpenLayers.Control.EditingToolbar(vectors));
			map.addControl(new OpenLayers.Control.MousePosition());

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

            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 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>
  </body>
</html>