Use of the moveend event.
In this example, a listener is registered for the map's moveend event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.
moveend
<!DOCTYPE html> <html> <head> <title>Moveend Example</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/3.8.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/3.8.1/build/ol.js"></script> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> </div> </div> <label>top</label><input type="text" id="top"> <label>right</label><input type="text" id="right"> <label>bottom</label><input type="text" id="bottom"> <label>left</label><input type="text" id="left"> </div> <script> var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.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); </script> </body> </html>