Add real location tracking

soundscape-community · Dec 30, 2023 · da72121 · da72121
1 parent 379bcc0
commit da72121
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 4 deletions.
diff --git a/app/js/gpx.js b/app/js/gpx.js
@@ -66,7 +66,6 @@ function replayGPX(file, map, pointCallback, errorCallback, delayBetweenPoints =
 
 // Actions to take when page is rendered in full
 document.addEventListener('DOMContentLoaded', function () {
-  const inputElement = document.getElementById("gpxFileInput");
   const locationProvider = createLocationProvider();
   const audioQueue = createSpatialPlayer(locationProvider);
   const announcer = createCalloutAnnouncer(audioQueue, proximityThresholdMeters, false);
@@ -80,6 +79,7 @@ document.addEventListener('DOMContentLoaded', function () {
     map.plotPoints([{ latitude: latitude, longitude: longitude, heading: heading }], proximityThresholdMeters);        
   });
 
+  const inputElement = document.getElementById("gpxFileInput");
   inputElement.addEventListener("change", function (event) {
     const file = event.target.files[0];
 

diff --git a/app/js/main.js b/app/js/main.js
@@ -4,11 +4,11 @@
 import { createSpatialPlayer } from './audio/sound.js'
 import { createCalloutAnnouncer } from './audio/callout.js'
 import { clearFeatureCache, clearURLCache } from './data/cache.js'
-import { getLocation } from './spatial/geo.js';
+import { getLocation, watchLocation } from './spatial/geo.js';
 import { createLocationProvider } from './spatial/location.js'
 import { createMap } from './spatial/map.js';
 
-const proximityThresholdMeters = 500;
+const proximityThresholdMeters = 100;
 
 // Actions to take when page is rendered in full
 document.addEventListener('DOMContentLoaded', function () {
@@ -26,12 +26,32 @@ document.addEventListener('DOMContentLoaded', function () {
   });
 
   // Hook up click event handlers
+  var btnCallouts = document.getElementById('btn_callouts');
+  var watchPositionHandler = null;
+  btnCallouts.addEventListener('click', function() {
+    if (watchPositionHandler) {
+      // Currently watching -- clear handler
+      navigator.geolocation.clearWatch(watchPositionHandler);
+      btnCallouts.textContent = 'Start';
+      audioQueue.stopAndClear();
+      audioQueue.addToQueue({ soundUrl: 'app/sounds/mode_exit.wav' });
+    } else {
+      // Not currently watching -- start handler
+      btnCallouts.textContent = 'Stop';
+
+      // play mode-enter sound
+      audioQueue.addToQueue({ soundUrl: 'app/sounds/mode_enter.wav' });
+
+      watchPositionHandler =watchLocation(locationProvider.update);
+    }
+  });
+
   var btnNearMe = document.getElementById('btn_near_me');
   btnNearMe.addEventListener('click', function() {
     if (audioQueue.queue.length > 0) {
     //if (btnNearMe.textContent == '(stop)') {
       audioQueue.stopAndClear();
-      audioQueue.addToQueue({ soundUrl: 'app/sounds/mode_exit.wav', x: 0, y: 0 });
+      audioQueue.addToQueue({ soundUrl: 'app/sounds/mode_exit.wav' });
       //btnNearMe.textContent = 'Places Near Me';
       return;
     }

diff --git a/app/js/spatial/geo.js b/app/js/spatial/geo.js
@@ -70,6 +70,28 @@ export function getLocation(callback) {
   });
 }
 
+export function watchLocation(callback) {
+  return navigator.geolocation.watchPosition(
+    function (position) {
+      console.log(position);
+      callback(
+        position.coords.latitude,
+        position.coords.longitude,
+        position.coords.heading || 0,  // not available on all platforms
+      );
+    },
+    function (error) {
+      // Reject the Promise with the error message
+      console.error("Error getting current position: " + error.message);
+    },
+    {
+      enableHighAccuracy: false,
+      timeout: 5000,
+      maximumAge: 0,
+    }
+  );
+}
+
 export function geoToXY(myLocation, myHeading, poiLocation) {
   // Convert degrees to radians
   const toRadians = degree => degree * (Math.PI / 180);

diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
         <script src="app/js/main.js" type="module"></script>
     </head>
     <body>
+        <button id="btn_callouts">Start</button>
         <button id="btn_near_me">Places Near Me</button>
         <button id="btn_clear">Clear Cached Data</button>