From 50ed564bf6f4d23e2dc48c421439cd3f01f81d14 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Thu, 5 Sep 2013 14:56:14 -0600 Subject: [PATCH 1/2] Fire a moveend event after rendering The moveend event is fired after rendering if there is no pending animation, current interaction, or other pre-render functions in the queue. --- src/ol/map.js | 9 +++++++++ src/ol/mapevent.js | 3 ++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/ol/map.js b/src/ol/map.js index bdd1332ff0..4d507301ee 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' }; From 6617969d36b87ecc07ebd8643cb3732a54350667 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Thu, 5 Sep 2013 14:58:12 -0600 Subject: [PATCH 2/2] Example using the moveend event --- examples/moveend.html | 59 +++++++++++++++++++++++++++++++++++++++++++ examples/moveend.js | 45 +++++++++++++++++++++++++++++++++ 2 files changed, 104 insertions(+) create mode 100644 examples/moveend.html create mode 100644 examples/moveend.js 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);