9.2 Geolocation

Hi, folks, in this lesson, we're going to take a look at the geolocation API, which can tell us where we are using various different means depending on the situation at hand. While incredibly useful for providing location based services to mobile devices, desktop computers can also make use of them. Unlike anything else that we've looked at so far in this whole course, geolocation is strictly opt-in for our users. So, as soon as we try to utilize their location data, they must except a prompt that specifically allows us to access it. The geolocation API is a globally available property of the navigator object. We can inspect it within the browser by entering it in the console. So these are the different methods that are available through the geolocation API. getCurrentPosition is used to get the users current position and watchPosition can be used to monitor the position as it changes while the user moves around. If we want to stop watching then we use the clearWatch method. So the most fundamental method is getCurrentPosition which we'll want to use to get the users current location data. This method is asynchronous, so we need to pass it a callback function that will be invoked when the location is returned. So, because this is the first time we've tried to access the location, we see this prompt and we need to allow the browser to access our location. That's partly why the method is asynchronous because we don't know how long it's gonna take for the user to approve our request for access and in fact they may never approve that pop-up. It might just sit there at the top of the browser until the user closes the browser and goes off and does something else. In which case we'll never get the location details. When the pop-up is approved however, we can see that we get this position object in the browser's console. So this has two properties, coordinates and timestamp. The timestamp is the current timestamp that's the UNIX epoch time, and we also get this coordinates object. And this is what gives us the latitude and longitude which tells us where the user is in the world. And we can see the accuracy, and there might be altitude and altitude accuracy. And if the user is moving, there might be a speed as well. Obviously, I'm running this example on a desktop computer. And that isn't going anywhere, so I'm not gonna see the speed there. But you can see some of the other properties that we get. As well as passing a success call back to the method, which is what we did in the first example there. We can also pass an error call back to handle situations where the location request failed. We can also pass a configuration object to specify certain configuration options such as high accuracy, or a time out for the request. We can highlight both of these additional arguments with a simple example. So first, let's add an error callback. Error call back will receive an error object which contains information about the failure and we can also provide a configuration object as the third argument. So let's have that as well. So one of the properties that we can set is a timeout which specifies how long the method should wait before it times out. And we have set this to 0 and that will allow us to test the error callback. So we see the PositionError which gets passed to the error callback. And, we can see that it has a code, and a message. And the message says, Timeout expired to indicate that the timeout elapsed. So, another method that we can make use of is the watchPosition method. This is very similar to the getPosition method, except that it invokes the success or error handlers, every time the position changes. This method returns a numerical id. And when we want stop watching the user's location, we pass this ID to the clearWatch method. And we can't show you these methods in action because, as I said, I'm using a desktop computer, and that's not moving. So the watchPosition handlers are never gonna be invoked. But just be aware that they exist. So in this lesson, we looked at the geolocation API and saw how we can use it to get or track a visitor's location. We learned that the getCurrentPosition and watchPosition methods are both asynchronous. And so require that we pass callback functions to them, which will be invoked either when the location requests succeed or fail. We also saw that we can pass a configuration object to these methods and that allows us to control things like the time out for the request. We also had a quick look at the position object which is passed when the request succeeds and the error object which will be passed to the error handler if these request fails. In the next lesson we'll look at web storage. Thanks for watching