Don't try to plot points before both location and orientation are ava…

…ilable
soundscape-community · Jan 4, 2024 · d45ff47 · d45ff47
1 parent 0ebf444
commit d45ff47
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/app/js/main.js b/app/js/main.js
@@ -114,14 +114,6 @@ document.addEventListener('DOMContentLoaded', function () {
     // required for iOS Safari: first speech must be directly triggered by user action
     playSpatialSpeech(' ');
 
-    // Explicitly request permission to get device orientation info
-    // (also per iOS Safari, needs to be triggered by a user action)
-    try {
-      await DeviceOrientationEvent.requestPermission();
-    } catch(e) {
-      console.warn('DeviceOrientation not available');
-    }
-
     // Reset button labels
     btnCallouts.textContent = 'Begin Tracking with Callouts';
     btnNearMe.textContent = 'Announce Places Near Me';
@@ -153,8 +145,16 @@ document.addEventListener('DOMContentLoaded', function () {
 
     switch (newMode) {
       case 'callouts':
-        watchPositionHandler = watchLocation(locationProvider.location.update);
+        // Explicitly request permission to get device orientation info
+        // (also per iOS Safari, needs to be triggered by a user action)
+        try {
+          await DeviceOrientationEvent.requestPermission();
+        } catch(e) {
+          console.warn('DeviceOrientation not available');
+        }
         window.addEventListener('deviceorientation', locationProvider.orientation.update);
+
+        watchPositionHandler = watchLocation(locationProvider.location.update);
         btnCallouts.textContent = 'End Tracking with Callouts';
         break;
 

diff --git a/app/js/spatial/location.js b/app/js/spatial/location.js
@@ -25,6 +25,7 @@ export function createLocationProvider() {
 
   // Device orientation (not compass heading from Geolocation API)
   var orientation = {
+    heading: 0,  // default to north if e.g. not available on this device
     callbacks: [],
 
     watch: function(callback) {

diff --git a/app/js/spatial/map.js b/app/js/spatial/map.js
@@ -41,14 +41,16 @@ export function createMap(id) {
   };
 
   map.plotMyLocation = function(locationProvider, radiusMeters) {
-    map.plotPoints(
-      [{
-        latitude: locationProvider.location.latitude,
-        longitude: locationProvider.location.longitude,
-        heading: locationProvider.orientation.heading
-      }],
-      radiusMeters
-    );
+    const lat = locationProvider.location.latitude;
+    const lon = locationProvider.location.longitude;
+    const head = locationProvider.orientation.heading;
+    // Don't try to plot points before both location and orientation are available
+    if (!isNaN(lat) && !isNaN(lon) && !isNaN(head)) {
+      map.plotPoints(
+        [{ latitude: lat, longitude: lon, heading: head }],
+        radiusMeters
+      );
+    }
   };
 
   return map;