Mapbox GL JS – How to Determine When FlyTo Has Arrived

mapboxmapbox-gl

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.

Best Answer

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/

Related Question