OpenLayers 3: "movestart" event on map

Question

OpenLayers3 API has a map.on("moveend") , however I cannot find a movestart. Any one know how I can achieve this? Is there a equivalent event?

OpenLayers 2 had a movestart 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 movestart 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 movestart and moveend events. But in the new OL3 version of the map, I can't get the movestart event.

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

Answer 1

UPDATE v4.2.0 now supports native movestart and moveend events

map.on('movestart', function(event) {

    //To Remove after first use: ol.Observable.unByKey(event);
});

map.on('moveend', function(event) {

    //To Remove after first use:  ol.Observable.unByKey(event);
});

For OpenLayers 3 versions before release of v4.2.0

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.

jsFiddle:

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

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 :(

UPDATE

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

function onpropertychange() {
  map.dispatchEvent('movestart');
  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

Answer 2

you could use the pointerdrag or pointermove event, but you will want to debounce them. I did so here with a variable called dragStarted

http://jsfiddle.net/sean9999/j2cP4/115/

http://openlayers.org/en/v3.8.2/apidoc/ol.MapBrowserEvent.html