So, you’re wanting to add some geolocation functionality to your web app and not sure how to do it? Well, look no further, I’ll give you a quick reference on it in this blogpost.
I’ll be writing this using HTML5 and Visual Studio Code which is a free, simple code editor that you can use in Windows, on a mac and on Linux. If you haven’t yet tried out Code, I encourage you to do it now!
HTML5 introduces a set of API’s that make your webpages more powerful. The one I am focusing on in this article is the geolocation API, which can be used to determine the geographical position of a user.
Which browsers can I use this with?
The table below shows you the minimum required versions of the leading browsers for the geolocation api:
Most browsers on mobile devices and tablets also support the geolocation API.
Geolocation can compromise user privacy, so the position will not be available to the user unless he/she approves it.
There is nothing special about this piece of HTML, other than that I’m ensuring that the semantic elements of HTML are rendered properly on older browsers.
Using HTML Geolocation
Simply call the GetCurrentPosition() method to get the user’s current position:
One of the things that I want to draw your attention to, is how I’m testing for the feature geolocation. This is considered best practice as opposed to doing browser-detection to figure out if the browser supports a feature or not. I strongly encourage you to get comfy with feature detection, as supporting websites that target features on named browsers and versions is on the way out. Really!
The call to getCurrentPosition() takes 3 parameters:
- The function to call when the method succeeds
- The function to call if the method fails
- Options that you can send
Completing this is as simple as the following:
We also need something to trigger this function, so I’ve added a button that calls into the getPosition() method.
The first time I start this webpage, my browser (here, Microsoft Edge) will ask me if I trust this webpage enough to share my geoposition.
Once confirmed, I get the results that I am interested in:
Great stuff, but what if things go wrong?
The above was the sunshine example of using the geolocation API. You need to check for several things other than if geolocation is available. Typically, you should add an error-checking method as well in order to deal with what went wrong:
Is that it then? Is getting positions all I can do?
Of course not – the object returned when the getCurrentPosition() method is called successfully returns other properties as well:
|coords.latitude||The latitude as a decimal number|
|coords.longitude||The longitude as a decimal number|
|coords.accuracy||The accuracy of the position|
|coords.altitude||The altitude (in meters) above sealevel|
|coords.altitudeAccuracy||The altitude accuracy of the position|
|coords.heading||The heading (degrees clockwise from North)|
|coords.speed||The speed you’re moving (meters/second)|
|timestamp||Date/time of the response|
There are also some other methods in the geolocation object that may intrigue you:
Returns the current position of the user and continues to return an updated position during movement
Stops the watchPosition() method
What about the third parameter – the options?
The last and final parameter for the getPosition() method is the PositionOptions. It contains three properties that you can set:
|enableHighAccuracy||true|false||Tells the application to use the best possible results. Might result in slower response times and/or increased power consumption|
|timeout||long||Allows you to specify how long you want to wait for the getCurrentPosition() or watchPosition() before calling the errorcallback|
|maximumAge||long||This allows you to specify, in milliseconds, how long the response from the getCurrentPosition() method should be cached.|
Is that it then?
Yup, that’s it! Hopefully, you’ll agree that adding geolocation to your webpage is fairly trivial, and embedding that functionality is pretty straight forward. Just be sure to handle errors decently, in order to secure the best possible experience for your users.
If you want to try our the tiny bit of code that I wrote for this, you can find it here:
For reference, here is the W3C documentation on the geolocation api:
The world is digital!