Moveend Event

This example uses OpenLayers v4.0.1. The latest is v.

#### Moveend Event

top right
bottom left

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.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.control
,
- ol.extent
,
- ol.layer.Tile
,
- ol.proj
,
- ol.source.OSM

Copy Edit
Moveend Event Use of the moveend event. 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); <div id="map" class="map"></div> <label>top</label><input type="text" id="top"> <label>right</label><input type="text" id="right"><br> <label>bottom</label><input type="text" id="bottom"> <label>left</label><input type="text" id="left">

    <!DOCTYPE html>
    <html>
      <head>
        <title>Moveend Event</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <label>top</label><input type="text" id="top">
        <label>right</label><input type="text" id="right"><br>
        <label>bottom</label><input type="text" id="bottom">
        <label>left</label><input type="text" id="left">
        <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>