How to determine when Mapbox GL JS FlyTo has "arrived"

Question

I'd like to show an overlay when the Mapbox flyto camera movement has completed its action, and is in place at the correct position and zoom level. Is there a way to know when that action is complete?

So, fly to a position and then show the overlay, basically.

Answer 1

You can achieve this by combining a few map event listeners and a variable as follows.

To prevent a tooltip when the user has moved or zoomed the map by mouse or keyboard you will need a variable that determines wheter your user clicked the "fly" button or not:

map.on('flystart', function(){
    flying = true;
});
map.on('flyend', function(){
    flying = false;
});

Then this code will execute once your map has stopped moving and zooming:

map.on('moveend', function(e){
   if(flying){
      // tooltip or overlay here
      map.fire(flyend); 
   }
});

See demo: http://jsfiddle.net/ft7s8son/