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!

[spwoodcock]

See comment 👍

[NSUWAL123]

Sure, I'll be looking at routing today.
Found this: https://maplibre.org/maplibre-gl-directions/#/
But don't know exactly if this would work as per our requirement

[spwoodcock]

Routing is complex! I don't this we should address the routing quite yet, but just allow for navigation mode that tilts the view and causes map rotation with the device 👍

[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!

I think these points should be enough requirements for now 😃

[NSUWAL123]

Oh. Achieved this state till now where routing is done from geolocation to the entity. But still need to work on live routing on the basis of live geolocation and refactoring the code.

So I'll finish the above mentioned priority requirement points and other issues then will revisit this routing feature again later.

[spwoodcock]

I mean, this is incredible if it works!

I assume routing is based on OSM and this would be great for many scenarios. Obviously not perfectly in all, but it's a really nice addition regardless! Great work 😁

[NSUWAL123]

• Closing this as the feature is implemented on PR Mapper navigation mode integration #1973