Understanding the basics of the HTML Geolocation API

When I first started building web apps it quickly became clear that a ton of functionality can come from external APIs. Things like adding a weather widget with DarkSky API (comment F to pay respects), or creating an interactive map with the Google Maps API became way easier after reading some documentation and practicing. However, as I have been going through these API docs I’ve realized that many of these functionalities are brought about through the use of Web APIs that our browsers already have access to.

For example, while using the aforementioned Google Maps API, I encountered the HTML Geolocation API which was essential in grabbing information about where the user was located. It was pretty amazing what types of data I could get about my surroundings just by checking out some features that the Geolocation API has to offer. Let’s explore what we can do!

There are 2 main uses for this API:

Finding a users location.

Tracking a users location.

In order to access ANY of these functionalities, you need to use some other tools that the browser gives us. Check out the code below:

navigator.geolocation is our key to accessing the Geolocation API’s functionality

Here we have a function called getLocation which is going to trigger another function called getCoords. In order for us to get to our getCoords function, we need to check to see if our browser supports geolocation. We do this by checking for the existence of navigator.geolocation.

If our browser supports geolocation (most do!), we then can use a very important call that the browser gives us called getCurrentPosition().

To see how important this is, let’s console.log what we get when we eventually hit the start of that getCoords function:

woah! thanks, browser.

So our getLocation function that we made is collecting our location right from our browser! By using navigator.geolocation.getCurrentPosition() we get access to all of these things. If the browser cannot currently provide certain information, such as altitude or speed, it will always return null.

So far we’ve found a users location. However, what if we wanted to track their location as they move around? I haven’t tested how well this works, but I think it will be pretty easy to implement if you understand the first bit above. The reason why is due to our navigator.geolocation line of code. Just like this gave us access to navigator.geolocation.getCurrentPosition() it also gives us access to navigator.geolocation.watchPosition(). If we were to run a similar function like above but with our watchPosition instead of getCurrentPosition something interesting happens.

I’m seein’ double! 0_0

Yup! We get our same geolocation position, but two times! That’s because in order to track anything, we need a before and an after. By comparing where a user was to where they are can help a user get back on track if they made a wrong turn or let them know that they’ve arrived at their destination.

I couldn’t get this to track me well enough while walking around within range of my wifi, and the W3 School docs show pretty much the same thing, so if anyone knows some neat way to test this out properly send me a message!

Two things about watchPosition() before we go!

1. watchPosition() doesn’t need to be called after you getCurrentPosition(). You can call this at anytime to track a users location.
2. In order to have your webapp stop watching a users location, you need to stop it with clearWatch().

I still have a ton of questions about what’s available right in my browser vs what I need to search for via third parties. However, after spending a bit with the Geolocation API I will certainly be looking for more Web API’s to tinker around with.