Browser Geolocation API Demo

September 2020 · about 1 minute to read

I was recently investigating the feasibility and capability of browser-based Geolocation, especially on mobile devices as an alternative to native mobile development. The Geolocation API is a W3C standard that defines a high-level JavaScript API for websites to query the physical position of a device. According to the ever-useful MDN docs, the APIs are well-supported.

There are two ways to retrieve location:

Request the device’s current position (getCurrentPosition)
Track the device’s position over time (watchPosition)

Both methods can be configured with a timeout, a maximum age (for returning cached data), and an accuracy hint. Returned positions have a timestamp and coordinates, which includes latitude/longitude with 95% confidence range, altitude with 95% confidence range if supported, and speed and heading if supported. Any request for location data will prompt the user for permission.

Testing across a range of desktop and mobile devices, the behaviour varied somewhat. In particular, the interactions of the location cache with the timeout and maximumAge options was hard to understand, and maximumAge wasn’t always strictly followed.

I’ve put together single-page HTML demo, which is <200 LOC. I’ve included an iframe version below.

Notes & Questions

In almost all of my testing, the actual location was within the 95% area returned by getCurrentPosition, but I think this depends on WiFi SSID mapping. The spec doesn’t care how the device determines it’s position beyond the enableHighAccuracy option. For example, Apple uses “GPS and Bluetooth (where they’re available), along with crowd-sourced Wi-Fi hotspots and cellular towers to determine the approximate location of your device.”
The enableHighAccuracy option is indicative only, in mobile Safari this can be disabled.
How do devices determine 95% confidence (accuracy and altitudeAccuracy) is this consistent across devices?
According to the spec, the successCallback for watchPosition “is only invoked when a new position is obtained and this position differs significantly from the previously reported position. The definition of what constitutes a significant difference is left to the implementation.” In my testing, this was called every few seconds on a stationary device.

Daniel Fone

Browser Geolocation API Demo

Notes & Questions

Further Reading