Mapper navigation mode integration

[NSUWAL123]

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation
• 🧑‍💻 Refactor
• ✅ Test
• 🤖 Build or CI
• ❓ Other (please specify)

Related Issue

• Related to MapLibre pitch map angle for navigation #1888

Describe this PR

1. Geolocation dot and orientation arc by default when the page loads
2. A separate button to go in 'navigation mode':

• The orientation arc is replaced with an arrow
• The map pitches to an angle of 50 degrees.
• The map rotates to match the user's device orientation, with the arrow at the center of the screen all the time.

Screenshots

Screen_Recording_20241210_154637_Chrome.mp4

[NSUWAL123]

Any suggestions on displaying the navigate button better in terms of UX? @spwoodcock @manjitapandey

[spwoodcock]

Love it!

Instead of a general button on the map for navigation mode, could it be a button inside the feature popup?

We can have two buttons there
'Navigate Here'
'Map In ODK' --> 'Collect Data'

For now, it just enables navigation mode.
In a future PR, it also displays the walking route.

Does that sound OK?

[spwoodcock]

Also I realise we need a way to disable navigation mode in this case too:

• A button overlaying the map to say 'Stop Navigation'
• When the user clicks 'Collect Data' to go to ODK, we also stop the navigation before the redirect

[NSUWAL123]

Yeah! Sounds good

[spwoodcock]

I'll merge this for now, then another PR can add the changes 👍