How do you access user location and device info on your web pages?

1 Geolocation API

The Geolocation API allows you to get the user's current position, as well as watch for changes in their location. To use this API, you need to request the user's permission first, and handle any errors or rejections. You can use the navigator.geolocation object to access the methods and properties of the API. For example, you can use the getCurrentPosition() method to get the user's latitude, longitude, and accuracy, and pass a callback function to handle the result. Here is a simple example of how to use the Geolocation API:

// Check if geolocation is supported
if (navigator.geolocation) {
  // Request user permission
  navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
  // Display a message if not supported
  alert("Geolocation is not supported by your browser.");
}
// Define a callback function to show the position
function showPosition(position) {
  // Get the coordinates and accuracy
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  var acc = position.coords.accuracy;
  // Display the position on the web page
  document.getElementById("demo").innerHTML = "Latitude: " + lat + "<br>Longitude: " + lon + "<br>Accuracy: " + acc + " meters";
}
// Define a callback function to handle errors
function showError(error) {
  // Display a message based on the error code
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert("User denied the request for Geolocation.");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Location information is unavailable.");
      break;
    case error.TIMEOUT:
      alert("The request to get user location timed out.");
      break;
    case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.");
      break;
  }
}        

2 Device Orientation API

The Device Orientation API allows you to get the orientation and motion of the user's device, such as the tilt, rotation, and acceleration. This can be useful for creating interactive and immersive web pages, such as games, animations, or virtual reality. To use this API, you need to listen for the deviceorientation and devicemotion events on the window object, and access the event data in the event handler. For example, you can use the alpha, beta, and gamma properties to get the device's orientation in degrees, and the acceleration and rotationRate properties to get the device's motion in meters per second squared and degrees per second. Here is a simple example of how to use the Device Orientation API:

// Listen for the deviceorientation event
window.addEventListener("deviceorientation", handleOrientation);
// Define a function to handle the orientation data
function handleOrientation(event) {
  // Get the orientation angles
  var alpha = event.alpha; // The compass direction in degrees
  var beta = event.beta; // The front-to-back tilt in degrees
  var gamma = event.gamma; // The left-to-right tilt in degrees
  // Display the orientation data on the web page
  document.getElementById("alpha").innerHTML = "Alpha: " + alpha;
  document.getElementById("beta").innerHTML = "Beta: " + beta;
  document.getElementById("gamma").innerHTML = "Gamma: " + gamma;
}
// Listen for the devicemotion event
window.addEventListener("devicemotion", handleMotion);
// Define a function to handle the motion data
function handleMotion(event) {
  // Get the acceleration and rotation rate
  var acc = event.acceleration; // The acceleration in x, y, and z axes in m/s^2
  var rot = event.rotationRate; // The rotation rate in alpha, beta, and gamma axes in deg/s
  // Display the motion data on the web page
  document.getElementById("acc-x").innerHTML = "Acceleration X: " + acc.x;
  document.getElementById("acc-y").innerHTML = "Acceleration Y: " + acc.y;
  document.getElementById("acc-z").innerHTML = "Acceleration Z: " + acc.z;
  document.getElementById("rot-alpha").innerHTML = "Rotation Rate Alpha: " + rot.alpha;
  document.getElementById("rot-beta").innerHTML = "Rotation Rate Beta: " + rot.beta;
  document.getElementById("rot-gamma").innerHTML = "Rotation Rate Gamma: " + rot.gamma;
}