diff --git a/app/js/main.js b/app/js/main.js index 7c91c92..14d4fd5 100644 --- 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 index 801ed99..2c776cd 100644 --- 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 index f39fe02..eaf1eb9 100644 --- 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;