TurnByTurn: Introduce Turn by turn navigation

[Dlurak]

Description

This pr adds support for turn by turn navigation 🎉

There are a few questions left which are described below in the ToDo section.

ToDo

• Hide/Move controll elements on the map
• Add turn by turn navigation controll elements
• Disable/Change the onMapClick/onMapHover listeners
• Improve map styles
• Use navigator.wakeLock to disable automatic locking while navigating
• Only allow starting when the start is at the users position
• Offer rerouting if the user takes a wrong turn
  • Detecting wrong routes. For the beginning only via gps. In a follow up maybe better map matching
  • Find the nearest point on the route to the users location to have the completed/uncompleted route more precisely
• Change the segmentation algorithm to generate less segments overall but more near the user (I already have an idea for an algorithm)
• Maybe only show the start navigation button if it is a phone/tablet?
  • Redesign for big screens
• More real world testing.
• Detect when the user reached their destination
• Add Audio-Instructions (Follow up?)
• Calculate stats
  • Distance to destination
  • Remaining time, but how?

Small things that arised while developing:

• Show real preview images for layers
• Debug the mode in useTurnByTurnContext
• Allow the user to temporarily move/rotate the map manually
  • It should flyTo the calculated bearing/position after a short time or at least offer a button to do so
  • Currently it is blocked as useOrientation changes all the time and the useEffect has it as a dependency
• Dynamic zoom
  • Complex Junctions => high zoom
  • Long strait => low zoom
  • Waling => high zoom
  • Driving => low zoom

Screenshots

New usefull functions

const { confirm } = useConfirmationContext()
await confirm("Only a description")
await confirm({
	description: "Do you want to delete that?",
	cancel: "Don't delete",
	confirm: "Deletee!",
	callback: (confirmed) => {
		if (!confirmed) {
			return
		}
		delete()
	}
})
await confirm({
	description: "This information requires the user to accept it",
	cancel: false,
	confirm: "Understood",
})

The confirm function from that hook offers a easy way to open a confirmation. It returns a Promise<boolean> which can't reject but only resolve, true is for confirmed, false for canceled. I think that function may become handy in the future also for other features :)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
osmapp	✅ Ready (Inspect)	Visit Preview	Nov 26, 2024 7:30pm

[karussell]

Interesting! Feel free to copy (with attribution) from my work as much as you like: graphhopper/graphhopper-maps#279