18

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

22

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/

3
  • Doh. I looked at that list of events and never saw moveend. Thank you! Commented Dec 15, 2015 at 13:22
  • Dude, I really appreciate it! This works great!
    – willbeeler
    Commented Aug 24, 2017 at 17:43
  • 6
    "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
    Commented May 14, 2021 at 13:53

Your Answer

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

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