OpenLayers Coordinate Unprojection – How to Unproject Coordinates on a Google Map with OpenLayers

coordinate systemcoordinatesgoogle mapsjavascriptopenlayers-2

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});
        map.addLayer(gmap);

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

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

        map.addLayer(veroad);

        // 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");
        map.addLayer(vectors);

        vlayer = new OpenLayers.Layer.Vector( "Editable" , {
            styleMap: myStyles,
            rendererOptions: {zIndexing: true}
        } );
                map.addLayer(vlayer); 
        // 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,
                                        OpenLayers.Handler.RegularPolygon,
                                        {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
        vlayer.events.on({
        featuresadded: function (event) {
        var confirmPolygon = function () { return confirm("Do you want to keep this polygon?") };

        if (!confirmPolygon()) {
            vlayer.removeFeatures(event.features);
          }
         }
        });

        // Now we call an alert to get the bounds or coordinates from a circle or vector we have drawn 
        vlayer.events.on({
        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";
        alert(answer);
        }

         }

Best Answer

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.

Related Question