Navigation mode to tilt and orientate map to users perspective

[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

• Tilt map by 45 degrees on geolocation toggle

Screenshots

[NSUWAL123]

We would only tilt the map on the geolocation trigger or should we also add other functionalities(needs discussion) if the geolocation is on?
CC: @spwoodcock @manjitapandey

[spwoodcock]

The long tern goal is to have a navigation mode I think.

User clicks a button to navigate to a building.

The map tilts / pitches and orientation rotation starts. We face the map in the direction the user is facing.

Then the next step is to work out adding routing as a polyline to follow.

Do you think the first part is achievable now (without routing?)

[NSUWAL123]

I'll have a look at that.
I tried to add map rotation based on device rotation but it makes the UI a bit laggy & zooming in and out the map is also laggy. But have to do more research.
There's a routing feature on Maplibre but have to do research on how we can integrate it.

[spwoodcock]

@charliemcgrady do you know how we could achieve a smooth map rotation experience in MapLibre when the device orientation changes?

We want to have a UX similar to most other mapping apps, with geolocation point and oritentation displayed with a blue arc in the normal view (we have this working).

But then we want a navigation mode where the map pitches to 30o (we also have this working), and the map rotates to look in the direction the user is oriented (the lagging problem Nishit described).

Eventually we want routing too, but that's another problem to solve!

[spwoodcock]

@NSUWAL123 I think the spec of this has changed slightly taking into account #1909

Ideally we want:

• Geolocation dot and orientation arc by default when the page loads (if the user accepts permissions).
• A separate button to go in 'navigation mode':
  • The orientation arc is removed as it's not needed.
  • The geolocation dot icon changes to an arrow.
  • The map pitches to an angle.
  • The map rotates to match the users orientation.

I'm basically describing Google maps navigation or similar!