The Geolocation interface represents an object which can be used to programmatically obtain the position of the device / user. This allows for some interesting user cases like customized results based on the location of a user, price discrimination etc.
An object with this interface is obtained using the navigator.geolocation property implemented by the Navigator object.
This object contains the following methods:
-
Geolocation.getCurrentPosition()
: Determines the device's current location and gives back a Position object with the data -
Geolocation.watchPosition()
: Returns a long value representing the newly established callback function to be invoked whenever the device location changes -
Geolocation.clearWatch()
: Removes the particular handler previously installed using watchPosition()
Get the geo location / position of a user
With getCurrentPosition
you can obtain the position of the device. If you're calling that message for the first time for a website, the user will be asked for permission to the location.
navigator.geolocation.getCurrentPosition(position => {
console.log(position)
})
The method expects a callback which calls itself with the current position. That Position
object contains two properties:
-
coords
, a Coordinates object -
timestamp
, the UNIX timestamp when the position was retrieved
The Coordinates
object comes with several properties that define the location:
-
accuracy
the accuracy of the position measured in meters -
altitude
the altitude value measured in meters -
altitudeAccuracy
the accuracy of the altitude measured, expressed in meters -
heading
the direction towards which the device is traveling. Expressed in degrees (0 = North, East = 90, South = 180, West = 270) -
latitude
the latitude value measured in meters -
longitude
the longitude value measured in meters -
speed
the speed at which the device is traveling, expressed in meters per second
It's not guaranteed, that all the properties will have values. Some of them will just be null. That depends on the device and browser.
A Position
object might look something like
{
coords: {
accuracy: 1446,
altitude: null,
altitudeAccuracy: null,
heading: null,
latitude: 52.5082624,
longitude: 13.2972544,
speed: null,
},
timestamp: 1567849894270
}
If the user denies the position
As mentioned the user is asked to allow the fetching of the position. But what happens if the user denies this request? getCurrentPosition
has a second parameter, which is also a callback, that is called with an error object.
This error object contains a code
property, that has three states:
- 1: permission denied
- 2: position unavailable
- 3: timeout
navigator.geolocation.getCurrentPosition(position => {
console.log(position)
}, error => {
console.log(error)
})
Configure the position request
As a third parameter the getCurrentPosition
method takes an options object to configure your position requests:
-
timeout
: it might take a while for your browser to access the location, with the timeout (in milliseconds) you can configure who long to wait before calling the error callback -
maximumAge
set the maximum age (in milliseconds) of the position which is cached by the browserenableHighAccuracy
a boolean (defaultfalse
); set to true if you require a position with the highest level of accuracy possible (might take more time and has a higher power consumption)
navigator.geolocation.getCurrentPosition(position => {
console.log(position)
}, error => {
console.log(error)
},
{
timeout: 5000, // 5 seconds timeout
maximumAge: 10000, // accept only position, that are not older than 10 seconds
enableHighAccuracy: true // high accuracy
})
Watch the geo location of a user
Instead of getting the position only once, you can also watch the position of a user and get it everytime it changes.
const id = navigator.geolocation.watchPosition(position => {
console.log(position)
});
// stop watching after 1 minute
setTimeout(() => {
navigator.geolocation.clearWatch(id)
}, 60 * 1000)
As you see in the example you can use clearWatch
to stop watching a positon. It takes the id of the watch process as an argument, which is returned by watchPosition
.
watchPosition
has the same signature as getCurrentPosition
. That means the second parameter is the error callback and the third parameter is the configuration object.
Top comments (0)