Compass indicator not showing on iOS Safari

[8volution23]

Hi, I am using the option showCompass when initializing the locatecontrol plugin and it is working fine on Chrome and Firefox on iOS but it does not show the compass heading indicator when using Safari.

This is my configuration:

`var lc = L.control.locate({
showPopup: false,
drawCircle : true,
position: 'topright',
showCompass: true,
keepCurrentZoomLevel: true,
flyTo: false,
clickBehavior: {
inView: 'setView', outOfView: 'setView', inViewNotFollowing: 'inView'
},
locateOptions:{
enableHighAccuracy: true,
maxZoom: 15
}
}).addTo(map);

lc.start();`

Is anyone else having the same problem?

Thanks

[domoritz]

#262 shows that it worked. I wonder what changed. Can you help debug?

[robertdijk]

Hi, I had the same issue for a moment. I tried my own website and the demo on my iPhone Xs on Firefox 25.1, Chrome 81.0.4044.124, and Safari on iOS 13.4.1. For some combinations it did work, and for some, it didn't. Also when I switched to a private tab, I would work. I noticed that when it did work it not only asked permission for location, but also for direction.

The solution that worked for me:
Reboot my iPhone.

After that, both sites worked on all 3 browsers for me. Probably something was cashed wrong locally.

[wanglin88207056]

i have the same problem on pc and mobile, did you solve this problem?

[robertdijk]

Rebooting my phone worked for me

[Lunok]

Hello, this issue seems related to: #285 (comment)

[jessegpierce]

I just realized the above linked issue is marked closed, so I'll comment here.

In searching for an answer to this issue, I found this thread located here: https://developer.apple.com/forums/thread/128376.
For my quick solution, I put this snippet at the top of my L.Control.Locate.js file:

//Request permission to use heading for ios function requestDeviceOrientation () { if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') { DeviceOrientationEvent.requestPermission() .then(permissionState => { if (permissionState === 'granted') { window.addEventListener('deviceorientation', () => {}); } }) .catch(console.error); } else { // handle regular non iOS 13+ devices console.log ("not iOS"); } }

This requests permission from the user to accept access to the user's device orientation data. Once it loads it gives correct heading on the geolocation icon. Using iPhone 11 Pro Max ios 15.1.

Regards,

Jesse @ northdakotarigsmap dot com