Geolocation API

Ali Zhdanov
Sep 3, 2018 · 3 min read
Lonely Planet | Unsplash

As a web developer sooner or later you’ll have to get user location data. You might think, ok, I need some 100k+ react/vue/angular plugin to do it, but in reality, to get user location you need to write few lines of a vanilla javascript code. So let’s dive in.

Browser Support

Even though nowadays all current browsers support geolocation API, it’s a good practice to check if browser supports it.

if (navigator.geolocation) {
// geolocation related code
}
else {
// here you can handle fallback or error message
}

Getting Current Position

navigator.geolocation.getCurrentPosition(position, error, [options])

let try to understand this code. getCurrentPosition is method which accepts such parameters:

  • position (required) — successful callback function, the only one parameter contains position data (check the link to seewhat data this response returns)
  • error — as you can guess, option callback function, which contains error as the only parameter
  • options — object which contains additional position related options which we will discuss later

The simplest example will look like this:

Watch position

Sometimes you want to continuously get user position. For this specific case, you have watchPosition method. Is working the same as getCurrentLocation but will be constantly fired with updated location.

watchPosition(
// the same as getCurrentPosition, but called multiple times
);

Note: This method is basically event listener, so you can and must to remove it after you don’t need to get position updates. watchPosition invocation returns an id number which can be used with clearWatch to stop getting position

const id = navigatior.geolocation.watchPosition(...);// later in the code
navigatior.geolocation.clearWatch(id);

Tunning response with options

The third parameter of positions methods is a options, which can give you some neat advantages

  • maximumAge(number — milliseconds) — in many situations you don’t need the latest location of the user, maximumAge will return you cached position value within a specified time period. The benefit, if a value already in cache, answer gonna be much faster. But it also prevents the browser from starting its geolocation hardware interfaces. which potentially can save some battery for the user.
  • setTimeout(number — milliseconds) — waiting for a response for a long time be frustrating, set a timeout to throw an error if the location wasn’t resolved in this time. Note: default value is infinity so if you won’t specify the timeout, callback will never resolve.
  • enableHighAccuracy(boolean) — location API by design returns rough location, which is a bit faster and more performant. But in case if you need as exact as possible data, you can use this field. But be careful, because it’s more time consuming and uses more power.

Bonus: Promisified geolocation

As you’ve already might notice, Geolocation API is using callbacks. You might be wondering if it’s possible to use promises. Well, while API is callback only, we can promisified it by yourself. Here’s code:


So you can see that Geolocation API creators have made a good job to make our life much easier. Just in a few lines, you can get user location. But also with help of options and watchPosition method, you can tweak performance and subscribe to new position data. Even though API is using callback pattern we can easily promisified it.

Used Resources

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade