I have created a mobile compass with the help of the following instruction.
Real Compass on mobile browsers with Javascript
But the compass spins 360 degrees whenever it points to North. How can I avoid this behavior? Here is the demo by the author. DEMO
function init() {
startBtn.addEventListener("click", startCompass);
}
function startCompass() {
if (isIOS) {
DeviceOrientationEvent.requestPermission()
.then((response) => {
if (response === "granted") {
window.addEventListener("deviceorientation", handler, true);
} else {
alert("has to be allowed!");
}
})
.catch(() => alert("not supported"));
} else {
window.addEventListener("deviceorientationabsolute", handler, true);
}
}
function handler(e) {
compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;
}
init();
let pointDegree;
function locationHandler(position) {
const { latitude, longitude } = position.coords;
pointDegree = calcDegreeToPoint(latitude, longitude);
if (pointDegree < 0) {
pointDegree = pointDegree + 360;
}
}
function calcDegreeToPoint(latitude, longitude) {
// Qibla geolocation
const point = {
lat: 21.422487,
lng: 39.826206,
};
const phiK = (point.lat * Math.PI) / 180.0;
const lambdaK = (point.lng * Math.PI) / 180.0;
const phi = (latitude * Math.PI) / 180.0;
const lambda = (longitude * Math.PI) / 180.0;
const psi =
(180.0 / Math.PI) *
Math.atan2(
Math.sin(lambdaK - lambda),
Math.cos(phi) * Math.tan(phiK) -
Math.sin(phi) * Math.cos(lambdaK - lambda)
);
return Math.round(psi);
}
function init() {
startBtn.addEventListener("click", startCompass);
navigator.geolocation.getCurrentPosition(locationHandler);
}
function handler(e) {
compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;
// ±15 degree
if (
(pointDegree < Math.abs(compass) && pointDegree + 15 > Math.abs(compass)) ||
pointDegree > Math.abs(compass + 15) ||
pointDegree < Math.abs(compass)
) {
myPoint.style.opacity = 0;
} else if (pointDegree) {
myPoint.style.opacity = 1;
}
}
I wonder how I could simply make it work without the spinning. Otherwise, should I find a way to execute the code once?