Below is my code and a pic. When I finish making my circle on a Google map with Openlayers, I get the following coordinates but I want coordinates like E.G:

bottom: -27.762124575762 left: 25.828500424238 right: 27.402749575762 top: -26.187875424238

But instead I get:

enter image description here

Here is my code:

            function init() {

            // Add the map
            var options = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326"),
            units: "m",
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                             20037508.34, 20037508.34)
        map = new OpenLayers.Map('map', options);

        // Add the OpenStreetMaps Layer
        var osm = new OpenLayers.Layer.OSM.Mapnik("OpenStreetMap (Mapnik)", {
            displayOutsideMaxExtent: true,
            wrapDateLine: true,
            buffer: 0

        // Add the google maps Layer
        var gmap = new OpenLayers.Layer.Google("Google", {sphericalMercator:true});

        // http://bingmapsportal.com/ and use that instead.
        var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";

        // BING Maps
        var veroad = new OpenLayers.Layer.Bing({
        key: apiKey,
        type: "Road",
        wrapDateLine: true


        // This is the call to create the OpenLayers Vector Framework Circle Layer and Edit Toolbar
        var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
            "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});

        // Now we must define our vector style
        OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';     

        // Styles for Default and Select states
            var myStyles = new OpenLayers.StyleMap({
            "default": new OpenLayers.Style({
                fillColor: "#000",
                fillOpacity: 0.3,
                strokeColor: "#000",
                strokeOpacity: 0.3,
                strokeWidth: 1,
                graphicZIndex: 1
            "select": new OpenLayers.Style({
                fillColor: "#ccc",
                fillOpacity: 0.6,
                strokeColor: "#ccc",
                strokeWidth: 1,
                label: "Label for Mouseover",
                labelAlign: "cc",
                fontColor: "#333333",
                fontOpacity: 0.9,
                fontFamily: "Arial",
                fontSize: 14,
                graphicZIndex: 2

        // Add a vector Layer which holds the markers
        vectors = new OpenLayers.Layer.Vector("Vector Layer");

        vlayer = new OpenLayers.Layer.Vector( "Editable" , {
            styleMap: myStyles,
            rendererOptions: {zIndexing: true}
        } );
        // Options for the sides wanted in the default circle e.g 3 sides = triangle
        polyOptions = {sides: 40};

        // At this point we must make a control to draw a circle on the map after a button to activate is clicked
        polygonControl = new OpenLayers.Control.DrawFeature(vlayer,
                                        {handlerOptions: polyOptions} );

        // Now we add the an alert for an option to delete once the user has drawn a circle or vector on the map
        featuresadded: function (event) {
        var confirmPolygon = function () { return confirm("Do you want to keep this polygon?") };

        if (!confirmPolygon()) {

        // Now we call an alert to get the bounds or coordinates from a circle or vector we have drawn 
        featuresadded: onFeaturesAdded

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


You just need to re-project the geometry before displaying it:

var bounds = event.features[0].geometry.getBounds();

Should be:

var mapProj =  map.getProjectionObject();
var epsg4326 = new OpenLayers.Projection("epsg:4326");
// OR  in your case ...
// var epsg4326  = map.displayProjection;

var boundsNative = event.features[0].geometry.getBounds();
var boundsLatLon = boundsNative.transform( mapProj , epsg4326  );

Of course you can combine above into 1 line, just splitting up so you see what's going on.

  • Thanks Vadim . That worked , Just gave me a bug with my hover effect, Trying to go through my code and fix it now. If I don't come right , I will post another question:) – Blake Loizides Mar 3 '12 at 9:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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