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.

1 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){
      // tooltip or overlay here

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

  • Doh. I looked at that list of events and never saw moveend. Thank you! Dec 15, 2015 at 13:22
  • Dude, I really appreciate it! This works great!
    – willbeeler
    Aug 24, 2017 at 17:43
  • 5
    "flystart/end" events appear to have been removed in mapbox-gl-js 2+, but you can still do a map.once('moveend',()=>{}) before the flyTo or other call and capture the final location-
    – chrismarx
    May 14, 2021 at 13:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.