adding heading consideration

2c1002f363679db2dfe0a58d3d3969dc34c55912 · Pavel Safronov · 2026-03-14 10:52:00 -0700 · parents 0adcad67ad0b

adding heading consideration

 src/app.js | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index eed120d..9da9cde 100644
--- a/src/app.js
+++ b/src/app.js
@@ -67,6 +67,22 @@ const selfPosition = {
     lat: 47.62055039884746,
     lon: -122.34928833200904
 };
+navigator.geolocation.watchPosition((pos) => {
+    selfPosition.lat = pos.coords.latitude;
+    selfPosition.lon = pos.coords.longitude;
+    render();
+}, (err) => {
+    console.error('Error getting geolocation', err);
+});
+// Heading, assume north orientation by default, but if we get a heading from the device, use that to rotate the arrow accordingly
+let selfHeading = 0;
+window.addEventListener('deviceorientationabsolute', (event) => {
+    if (event.absolute && event.alpha !== null) {
+        selfHeading = event.alpha;
+        render();
+    }
+});
+
 const getTestParticipantPosition = (angle) => {
     const radius = 0.001; // ~111 meters
     return {
@@ -108,10 +124,13 @@ const render = () => {
     const dy = target.position.lat - self.position.lat;
     const rawAngle = Math.atan2(dy, dx) * (180 / Math.PI) + 90;
 
+    // Consider the heading of the device to rotate the arrow accordingly
+    const targetAngle = (rawAngle - selfHeading + 360) % 360;
+
     if (currentArrowAngle === null) {
-        currentArrowAngle = rawAngle;
+        currentArrowAngle = targetAngle;
     } else {
-        currentArrowAngle += getShortestDelta(currentArrowAngle, rawAngle);
+        currentArrowAngle += getShortestDelta(currentArrowAngle, targetAngle) * 0.1; // smooth the rotation
     }
 
     arrow.style.transform = `rotate(${currentArrowAngle}deg)`;