Using HTML5 geolocation functionality to build location aware apps

Hi there!

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.

Note:
Geolocation can compromise user privacy, so the position will not be available to the user unless he/she approves it.

Let’s start with an empty HTML5 webpage:

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:

I have to hand it to Visual Studio Code here – the IntelliSense is just amazing

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.

Running it

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:

There are also some other methods in the geolocation object that may intrigue you:

watchPosition()
Returns the current position of the user and continues to return an updated position during movement

clearWatch()
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:

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:

https://jsfiddle.net/digitaldias/b15oqdqk/3/

For reference, here is the W3C documentation on the geolocation api:

dev.w3.org/geo/api/spec-source.html

And finally, if you want to learn more about developing HTML5 with JavaScript and CSS3, make sure to check out our free training course on
Microsoft Virtual Academy

The world is digital!

Pedro