Geolocation API Practice

[00:00:00]
>> So the API, because it's one of the oldest APIs, it's an old way of writing code. I'm going to write that code directly, so we are going to try this manually. It's not supporting, for example, promises. It's the old-fashioned callback way. Forget about the slides, let's do some writing.

[00:00:22]
So I'm going to open an IDE now. I'm going to write this code, because this code is pretty simple. It's up for you to understand how that works. So I'm going to open the folder. I'm not going to use cooking masters right now. Here we are. You're going to use that in the afternoon.

[00:00:47]
So, so far, I'm going to create a new folder. I mean, you don't need to follow my code, or you don't need to download the code for this particular example. It will be just a new, from scratch HTML. So I'm going to create a demo folder. In that demo folder, I'm going to create index, or let's say, Geo.js and Geo.html.

[00:01:07]
So just plain HTML, we're going to play with geolocation like so. And I'm going to create, put a button here that will say start, and I'm going to use an output HTML element. Yeah, that element exists, the output element. We use that for sending outputs to the user.

[00:01:30]
Anyway, it's HTML compatible, no problem HTML5, and I'm gonna add the script. Geo.js differ, and nothing so fancy. We can make this old-fashioned way, like onclick, call it start. It's a micro app, simple to understand, okay? Through out a page, a button, and I'll put the element where we are going to send data.

[00:01:57]
So we can use the console if you want, it doesn't matter. So now, I need to write the function, start. So what we're going to do here is then to use the Geolocation API. The geolocation is navigator.geolocation. So first, how do we know if the API is there?

[00:02:20]
First, this API is dark green, so it's available everywhere. We won't have any problem on this particular API. But let's say that we wanna be safe in case we have a user with Internet Explorer 6, okay? By the way, IE, Internet Explorer, that API, I think appeared in IE 9 and so by IE 7.

[00:02:44]
So one way to check if for example, is to use the IN operator. I'm not sure if you have used that operator in JavaScript before, where it can check if a property is available in an object. So I can check if geolocation, and we pass the property as a string is available in the Navigator option, that's a simple way to do that.

[00:03:06]
There are many ways to ask for something similar if it's not undefined and so on. But this is one of the techniques that is mostly used. So now, we are safe to call the API, because if not, we will get null exception. There are actually two ways to listen for user's location, getCurrentPosition or watchPosition.

[00:03:33]
Let me write one, and exact is exactly the same. It receives two callbacks. Callbacks are functions. The first one will be for when the location was acquired. So we've got the location from the user. And the second one, we can write this in this way if you like, or we can create handlers functions outside of the function call.

[00:03:57]
And then we have another one for when there is an error. The location couldn't be acquired for whatever reason, the user has denied permission. We don't have connection, we don't have GPS, we are on Mars, okay? So yeah, we can't locate the user. Yeah, you will get an error, and the error has a type.

[00:04:15]
But you can actually check which kind of error it is. And the position, we can do a console log of the object to see what's going on. And because we do have an output, we can do querySelector, output, and change the text content. And typically, the most important part that we need from here is the latitude and the longitude.

[00:04:40]
And we will get that from the object position.coords, coordinate.latitude and dot longitude. Position.coords longitude. You can see what else do we have, but we will see that directly in action. We have altitude that is not always available. For example, when it's Wi-Fi, the altitude is complicated. Sometimes, it can get the altitude, but sometimes it's wrong.

[00:05:13]
In that case, it triangulates the information with the Wi-Fi surrounding you. I mentioned that there are two ways to read this, let's also add the error. getCurrentPosition or watchPosition, both have the same API, just two different call names. getCurrentPosition or watchPosition, what's the difference? getCurrentPosition will give me the location once, and watchPosition will continue listening for the location until we clear that watch.

[00:05:49]
So if we are walking, we will get new locations every once in a while.
>> How would you set the time that it will check that in here?
>> There is no timer, but there is a third argument that we can pass here with some options. One of the options is timeout.

[00:06:08]
That is not what I think what you were thinking as timer. Timeout by default is infinite. But here, we can express in milliseconds. For example, we can wait a minute, and it says, you know what, if after a minute you couldn't acquire location, I don't care, okay? So don't don't bother. Or maybe one second, right, that's too fast actually, okay, so that's timeout.

[00:06:32]
Another thing is maximumAge. What is maximumAge? By default, it's 0. If you said 0, you said, I want the location, a new location. So I want the phone to acquire a new location right now. But maybe I'm okay if it's the location from the last five minutes or from the last minute.

[00:06:55]
And because your phone, because of Google Maps, so it's always reading your location. Maybe you have the opportunity to get the location from a couple of seconds ago that is good enough for you and it's going to be faster. Make sense? So you can say, I'm okay if the location has an age of a minute.

[00:07:15]
I'm okay with that. And the last possible option is enable high accuracy. It's a boolean. If you say true, it will in the case that the device has several ways to locate the user. It will use the more accurate, the GPS one, not the Wi Fi. That's the only thing you can set.

[00:07:44]
>> Is the GPS more accurate than the Wi Fi?
>> Typically, yes. If you wait for the GPS to get the information. Because at the beginning, mostly when it's a A GPS, the GPS actually is the one that is being used by the military to get the rocket from the window, by the window.

[00:08:05]
However, we as civilians, we get a different version of the GPS that has random data. And so typically, the GPS accuracy, it's around 10 meters. I'm sorry, it's in meters. You made the conversion to yards. Okay, make sense? And that's all the API actually. That's all you have to know, there's no more.

[00:08:33]
So if I try these, first, to try these, we have to use a web server. You cannot open this in the file protocol. It depends on the browser actually. There are some browsers that might let you do that, but if you wanna be safe on every browser, you need to open this in with a web server.

[00:08:50]
So I have here a plugin that opens a web server. That's safari, let's use Chrome just because I was using Chrome before. And by the way, this API works only on HTTPS. The only exception is localhost. And be careful, because this website are pointing me to 175.0.0.1, that's not localhost.

[00:09:18]
So my capability API will not work, because it's not HTTPS. IP addresses will not work. I need to exactly say localhost. So for those capability APIs that needs HTTPS, localhost is an exception. But it has to be localhost, not the name of your computer, no, localhost, okay? Okay, and let me do this.

[00:09:44]
So we have the console here, and I'm going to load /geo, right? What's the name? No, it wasn't geo. It was demo/geo, demo/geo.html. Okay, so if I hit the start, I get the permission dialog. If I say Allow, again, now it says an error timeout expire.

[00:10:13]
That's wierd, I got the cordinates. I think this is Canary. By the way, Chrome Canary. It's Alpha, I think this is a bug. Because it says that my MacOS is not the granting access by already granted. So it's kind of weird. Anyway, we got the object. The object has a timestamp.

[00:10:35]
So you know how old the data is, and the coords object. I have accuracy, altitude I don't have. That's a hint that this is WiFi information, not GPS, right? I don't have altitude or altitude accuracy. Heading is magnetometer, but this is a Mac. It doesn't have that information heading to the north, okay?

[00:10:58]
It's an angle, latitude and longitude. I don't have a speed, because you get the speed with GPS as well, okay? What about accuracy? That's expressed in meters, sorry for you, US people. It's expressed in meters. So that's 16 meters, and that's all. That's all the API.
>> So you can't even ask what the provider is?

[00:11:23]
>> No, it's for other diagnostics, so you cannot ask. If you're using Chrome, and that's why I use Chrome, I'm not sure if you know that Chrome has a separate DevTools window little hidden. It's called the console drawer. To console drawer that you can enable that from the three dots from the dev tools, not the three dots from Chrome.

[00:11:43]
The console drawer is like a separate panel here. And in this panel, you, sorry. Open console drawer, it's here. We can enable with the three dots. More things, and there is one for sensors. In the Sensors tab of the console drawer, you can override location. So you can say, you know what, I'm in Berlin.

[00:12:16]
So now, because I were using watchPosition, is it still reading? So I'm jumping, okay? I have a teletransporter, and I'm teletransporter myself over different cities. And also, I can click Manage, and add my own locations. So if you are trying, if you are testing your web app on different cities, on different places in the city, you can add them here.

[00:12:45]
It's pretty cool. Even there are some plugins in case you need even more. There's a plugins to Chrome that will let you load a GPX file for example. There is an XML that you can export from GPS or from your phone. So you can go and take a walk, record a GPX file, and then replay your real walk on your web app on Chrome, okay?

[00:13:10]
That's pretty cool. And by the way, here, you can also create a custom orientation like that. And this is to emulate or simulate the Sensors API, okay? So while you are debugging and testing your app with Chrome, you don't have this on Safari, or Firefox, just on Chrome.

[00:13:29]
You can try how everything looks like on every orientation. I think it's pretty cool when you're trying to test your apps like this.