Shaunak Shaunak - 1 year ago 210
Javascript Question

OpenLayers 3: "movestart" event on map

OpenLayers3 API has a map.on("moveend") , however I cannot find a

. Any one know how I can achieve this? Is there a equivalent event?

OpenLayers 2 had a
event on map. I am looking an exact parallel in OpenLayers3

Here's a basic jsFiddle. If someone want's to play around. I did add a
event there, to show what I want, but it doesn't actually exist I think.

Use Case! one might ask: I have stops on maps that have nearly fullscreen infowindows. Users can switch to next marker from infowindow. I make the windows translucent to show the map panning underneath, so users get a context of where next location is. This work's great in OpenLayers2 with
events. But in the new OL3 version of the map, I can't get the

Update: I did answer the question my self, but I am still offering bounty if anyone would like to propose a better solution.

Answer Source

Okay so in the mean while without the movestart event, and with the moveend only triggering if there is a actual movement in map, here's how I was able to achive movestart and moveend behavior.


var pan = ol.animation.pan({
    duration: 700,
map.beforeRender(function(map, frameState) {
    var stillPanning = pan(map, frameState); // returns false panning is done
    if (stillPanning) {
        // do movestart stuff here
        if (!everDone) {
            everDone = true;
    } else {
        // do move end stuff here
        everDone = false;
    return stillPanning;

So why this works?

  1. ol.animation.pan returns a ol.PreRenderFunction, which returns false if animation is not complete

  2. Writing custom function and providing it to map.renderBefore can be now used to write a wrapper around pan animation as shown above

  3. The whole business with everDone is because, stillPanning section will get called multiple times. This is okay if what you want to do there can take repeated calls, but if you want to toggle something then you want to do it only once.

behavior of 'moveend' moveend callback is only triggered if map actually moves. This is fine, but it prevents us from doing pre-animation activities, by just doing them before animation done. If you had a scenario where map doesn't actually move, then what ever you did before animation will never undo because that behavior is in moveend which never gets called!

Hope this helps someone. I had to spend good two hours to get it to work for me, because a movestart callback is absent :(


Upon more discussion on this thread there is another solution as suggested by @ahocevar. That is to use the propertyvhange event on the view like so:

function onpropertychange() {
  var view = map.getView();
  view.un('propertychange', onpropertychange);
  map.on('moveend', function() {
    view.on('propertychange', onpropertychange);
map.getView().on('propertychange', onpropertychange);

Here's a working example of this approach: jsFiddle