OpenLayer3 - how to get coordinates of viewport

Question

I have a MapQuest displayed with OpenLayer3. I want to get coordinates of viewport (map area curretnly displayed). For the whole map this should be like this:(180,90) x (-180,-90).

but I got: Top-right longitude: 37570328.14272983 Top-right latitude: 18941707.105292957 Down-left longitude:-37570328.14272983 Down-left latitude:-18941707.105292957

I have jsFiddle for it: http://jsfiddle.net/0d6d6kxf/2/

(click "Get viewport coords" div to get coords of current map)

The command which I use for get coordinates is: var extent = map.getView().calculateExtent(map.getSize());

Why these result is not in degrees? How to get degree cordinates?

JS code:

$(document).ready(function(){
    object = new QuestMapWrapper();    
    object.openMap();
    object.getViewportCords();      
});

function QuestMapWrapper()
{
  //private var
  var map;
  var view;

  //public var
  this.wrapperName="QuestMapWrapper";

  //methods
  this.openMap = function() {

    //$('#ol-viewport').show();
    //$('#gmap').hide();


    //set layers of one
    var layers = [
    new ol.layer.Tile({
      style: 'Road',
      source: new ol.source.MapQuest({layer: 'osm'})
    })]

    view = new ol.View({
    //center: ol.proj.transform([20, 52.702222], 'EPSG:4326', 'EPSG:3857'),
    center: ol.proj.transform([0., 0.0], 'EPSG:4326', 'EPSG:3857'),
    //center: [-73.979378, 40.702222],
    zoom: 1
    });

    map = new ol.Map({
      layers: layers,
      //renderer: exampleNS.getRendererFromQueryString(),
      target: 'map',
      view: view
    });

  }; 

  /** Set viewport details  */
  this.getViewportCords = function() {

    //var extent = view.calculateExtent( map.getSize() );   
    var extent = map.getView().calculateExtent(map.getSize());

    //var extent = map.getExtent().transform(map.projection, map.displayProjection)

    var factor = 1; // coordinates must be devided by 100000 to get real coord

    $('#tr-lon').text(extent[2] / factor);
    $('#tr-lat').text(extent[3] / factor);    
    $('#dl-lon').text(extent[0] / factor);
    $('#dl-lat').text(extent[1] / factor);    
  } 
}

Erleena

Answer 1

You are almost there.

var extent = map.getView().calculateExtent(map.getSize());

This line is correct, but the coordinates you get are in a projection used by the map (EPSG:3857) and you need to convert it back to normal lon/lat (WGS84/EPSG:4326).

put the following line after to convert the extent:

extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');

As you can see when you created the View, you use a transform function to convert the center coordinates to EPSG:3857 which is a format that the map understand. Whenever you send coordinates into the View you need to send it in that projection. Whenever you read from the view, you need to convert it back to the projection you use, in this case EPSG:4326.

Mulford