DEV Community

loading...
Cover image for Track User's Location On Your Website

Track User's Location On Your Website

Bibek
Hey, πŸ‘‹ I'm a full-stack developer with expertise in the MERN stack. I do freelancing, contract jobs for my living πŸ‘¨πŸΌβ€πŸ’»
Originally published at blog.bibekkakati.me ・Updated on ・3 min read

Hello everyone πŸ‘‹

In this article, we will see how can we get access to the user's location on our website.

Tracking the user's location is not always necessary, but if you are building something like a location sharing application, a map-related application or to offer customized results based on the user's location then you need access to the user's location. By application, I mean web-based applications.

So how can we get access to the user's location?

Modern browsers provide almost everything we need in our application to enhance the user's experience. And here comes the Geolocation API which is a Web API provided by the browsers to get access to the user's location with their consent.

Live link to try it out at the end of the article.

What is Geolocation API?

Geolocation API is a Web API that gives Web content access to the location of the device.

Permission required to use the Geolocation API.

Implementation πŸ“

Let's understand the implementation of the API.

We can access the API from the browser's window.navigator object.

Check For Geolocation API Support

if (Boolean(window.navigator.geolocation)) {
  // It supports
  ...
}
Enter fullscreen mode Exit fullscreen mode

Geolocation Interface πŸ—ΊοΈ

geolocation is the main method that we need to access to get, track, cancel tracking the location. It has three properties (methods):

  • getCurrentPosition
  • watchPosition
  • clearWatch

Current Location πŸ“Œ

To get the current location of the device, we will use the getCurrentPosition method. This method will pass the current position to the positionCallback and in case of error, it will pass the error object to the errorCallback.

window.navigator.geolocation.getCurrentPosition(
    positionCallback,
    errorCallback
);
Enter fullscreen mode Exit fullscreen mode

Position Callback

function positionCallback(position) {
  // Assigning coords object for easier access.
  const coords = position.coords;

  // Position of the longitude .
  const longitude = coords.longitude;

  // Position of the latitude.
  const latitude = coords.latitude;

  // Accuracy of latitude & longitude in meters.
  const accuracy = coords.accuracy;

  // Altitude in meters, relative to sea level.
  const altitude = coords.altitude;

  // Accuracy of the altitude in meters. Value can be null.
  const altitudeAccuracy = coords.altitudeAccuracy;

  // Direction towards which the device is facing. This value specified
  // in degrees clockwise from North. Value can be null.
  const heading = coords.heading;

  // The velocity of the device in m/s. Value can be null.
  const speed = coords.speed;

  // The time at which the location was retrieved.
  const time = position.timestamp;
}
Enter fullscreen mode Exit fullscreen mode

All the values are of the double type.

Error Callback

function errorCallback(err) {
  let msg;
  switch (err.code) {
    case err.PERMISSION_DENIED:
        msg = "User denied the request for Geolocation.";
        break;
    case err.POSITION_UNAVAILABLE:
        msg = "Location information is unavailable.";
        break;
    case err.TIMEOUT:
        msg = "The request to get user location timed out.";
        break;
    case err.UNKNOWN_ERROR:
        msg = "An unknown error occurred.";
        break;
  }
}
Enter fullscreen mode Exit fullscreen mode

I think this function is very self-explanatory. It is just comparing the error code with the error type and we can handle it in any way.

Live Location 🌎

To track the live location of the device we can call the watchPosition method. This method takes the same arguments as getCurrentPosition. The method will pass the updated current position to the positionCallback as the device change its location and in case of error, it will pass the error object to the errorCallback.

const id = window.navigator.geolocation.watchPosition(
   positionCallback,
   errorCallback
);
Enter fullscreen mode Exit fullscreen mode
  • watchPosition method returns an id which we can use to stop tracking.

Stop Tracking πŸ›‘

To stop tracking the live location we can call the clearWatch method. The method expects id as an argument.

window.navigator.geolocation.clearWatch(id);
Enter fullscreen mode Exit fullscreen mode

Example✨

Check out the GitHub repo for sample code.

Try it out here.

Mobile devices will give more accuracy.


Originally published on blog.bibekkakati.me


Thank you for reading πŸ™

If you enjoyed this article or found it helpful, give it a thumbs-up πŸ‘

Feel free to connect πŸ‘‹

Twitter | Instagram | LinkedIn


If you like my work and want to support it, you can do it here. I will really appreciate it.



Discussion (2)

Collapse
rifkiard profile image
Rifki Ardiansyah

but its doesnt work on android chrome

Collapse
bibekkakati profile image
Bibek Author

Hey, It's working fine. Which version are you using? And don't forget to turn on the location and allow tracking.

Forem Open with the Forem app