text: goog.require('ol.Map');
  goog.require('ol.View');
  goog.require('ol.control');
  goog.require('ol.extent');
  goog.require('ol.layer.Tile');
  goog.require('ol.proj');
  goog.require('ol.source.OSM');
  
  
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    controls: ol.control.defaults({
      attributionOptions: {
        collapsible: false
      }
    }),
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    })
  });
  
  function display(id, value) {
    document.getElementById(id).value = value.toFixed(2);
  }
  
  function wrapLon(value) {
    var worlds = Math.floor((value + 180) / 360);
    return value - (worlds * 360);
  }
  
  function onMoveEnd(evt) {
    var map = evt.map;
    var extent = map.getView().calculateExtent(map.getSize());
    var bottomLeft = ol.proj.transform(ol.extent.getBottomLeft(extent),
        'EPSG:3857', 'EPSG:4326');
    var topRight = ol.proj.transform(ol.extent.getTopRight(extent),
        'EPSG:3857', 'EPSG:4326');
    display('left', wrapLon(bottomLeft[0]));
    display('bottom', bottomLeft[1]);
    display('right', wrapLon(topRight[0]));
    display('top', topRight[1]);
  }
  
  map.on('moveend', onMoveEnd);
  