1

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>
Improve this question

1 Answer 1

Reset to default
5

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);
}
Improve this answer
6
  • @BlakeLoizides : You're welcome, remember to click on the check mark to give me credit for the answer :).
    – CaptDragon
    Feb 7, 2012 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, 2012 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, 2012 at 20:57
  • @BlakeLoizides absolutely. Just create another question and place in the new code. I'll see it.
    – CaptDragon
    Feb 7, 2012 at 21:05
  • 1
    Just a small correction. In the second case to get vertices, call getVertices() instead of getBounds()
    – Imad
    Jan 18, 2015 at 13:12

Your Answer

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

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