I'm working on a project that involves changing the speed of background particles based on the user's device speed (like when they are in a car or bus). I thought the Geolocation API would be a perfect fit, specifically the Coordinates.speed property.
However, I've encountered an issue where the speed value always returns as null. Despite testing it on various devices like a Nexus 6p, a Mac, a Samsung tablet, and an iPad, I consistently get a null response in the console when checking "speed from API: null".
Does anyone have any insights on why the code isn't functioning as expected? Below is a link to the page and the script being used:
(...)
<script>
//getting the user location
var userSpeed = null;
function getLocation() {
setInterval(function(){
navigator.geolocation.watchPosition(showPosition); }, 500);
}
function render() {
if (userSpeed == null) {
userSpeed = 0.00005;
}
console.log("Speed used :" + userSpeed);
percentage += userSpeed; //Speed of the tunnel
var p1 = path.getPointAt(percentage % 1);
var p2 = path.getPointAt((percentage + 0.01) % 1);
camera.position.set(p1.x, p1.y, p1.z);
camera.lookAt(p2);
//Render the scene
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
function showPosition(position){
var speed = position.coords.speed;
console.log("Speed from API: " + speed);
// if too big
speed = speed / 1000000;
userSpeed = speed;
}
</script>Appreciate any help!