diff --git a/examples/moveend.html b/examples/moveend.html new file mode 100644 index 0000000000..f156d75e37 --- /dev/null +++ b/examples/moveend.html @@ -0,0 +1,59 @@ + + + + + + + + + + + Moveend Example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+
+
+
+
+
+ +
+
+

Move end example

+

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.

+

See the moveend.js source for details on how this is done.

+
+
moveend, map, event
+ + + + +
+ +
+ +
+ + + + + + diff --git a/examples/moveend.js b/examples/moveend.js new file mode 100644 index 0000000000..89f2b4d59a --- /dev/null +++ b/examples/moveend.js @@ -0,0 +1,45 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.proj'); +goog.require('ol.source.OSM'); + + +var map = new ol.Map({ + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.OSM() + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + 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 leftBottom = ol.proj.transform( + [extent[0], extent[2]], 'EPSG:3857', 'EPSG:4326'); + var rightTop = ol.proj.transform( + [extent[1], extent[3]], 'EPSG:3857', 'EPSG:4326'); + display('left', wrapLon(leftBottom[0])); + display('bottom', leftBottom[1]); + display('right', wrapLon(rightTop[0])); + display('top', rightTop[1]); +} + +map.on('moveend', onMoveEnd); diff --git a/src/ol/map.js b/src/ol/map.js index 32aafb8116..f5ac50a136 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -979,6 +979,15 @@ ol.Map.prototype.renderFrame_ = function(time) { } Array.prototype.push.apply( this.postRenderFunctions_, frameState.postRenderFunctions); + + var idle = this.preRenderFunctions_.length == 0 && + !frameState.animate && + !frameState.viewHints[ol.ViewHint.ANIMATING] && + !frameState.viewHints[ol.ViewHint.INTERACTING]; + + if (idle) { + this.dispatchEvent(new ol.MapEvent(ol.MapEventType.MOVEEND, this)); + } } this.dispatchEvent( diff --git a/src/ol/mapevent.js b/src/ol/mapevent.js index 080a707a9b..3629fb4936 100644 --- a/src/ol/mapevent.js +++ b/src/ol/mapevent.js @@ -9,7 +9,8 @@ goog.require('ol.FrameState'); * @enum {string} */ ol.MapEventType = { - POSTRENDER: 'postrender' + POSTRENDER: 'postrender', + MOVEEND: 'moveend' };