How to best tie into a webapp's mapbox-gl update code?

Question

Background

I'm writing a browser extension which paints over the map of komoot.com/plan . Currently I do this by placing a canvas on top of the existing canvas .

This works well but it is static and does not yet react to when the user moves the map around or zooms into it or the website focusses a particular location on the map.

Question

How do I best tie into this event loop of map updates?

Approaches considered

1. I could mimic / reimplement how komoot processes user input, but this sounds fragile and unreliable and messy. I would do this by adding listeners for mouse button events and cursor movement, etc.

2. The page's URL contains the lat and long coordinates together with the zoom level, eg, https://www.komoot.com/plan/@49.9535480,5.3956956,11.345z . It changes after the map has changed. I assume there's a way to be notified of changes in the URL. If so I could then dynamically update my canvas .

   • This would still require some level of imitation of the page's internals. However, considerably less so than option 1.
   • Doing so I could only update my canvas after the animation is finished. Not a deal breaker but ideally I'd want to update it frame by frame together with the map itself for a more pleasing user experience.

Additional Details

• Komoot seems to be using mapbox-gl
• It's a Manifest 2 Content Script extension
• This is my first browser extension ever
• I'm writing this in Scala.js using this excellent template
  • Don't let this keep you from posting javascript solutions or pointing me to javascript documentation!

Screenshot

Answer 1

You don't seem to have mentioned the obvious way: use the move event:

map.on('move',e => {...
   // get center with map.getCenter()
});

But it's not really clear exactly what you're trying to do, so hard to advise more specifically.