In this video we're going to learn how we can determine the user's physical location in the world using
just functions that are built into most modern browsers.
So believe it or not it's going to be pretty straightforward.
Are going to be using something called the geo location API.
Like I mentioned this is built into most modern browsers.
And there's actually a tremendous amount of documentation about it online if you want to you could pull
open the Mozilla or Indian documentation on this to read a little bit more about it.
Now I've got the documentation open right here.
This is the Indian or Mozilla developers network.
So you can read a little bit about it if you want to essentially already going to do is get the users
current position.
This is a function that is going to make an educated guess about where the user is physically located
depending upon a couple of different parameters such as the user's IP address different Wi-Fi networks
that are visible in the area and other similar little tidbits of information.
In practice it can actually come up with a very very good guess of where you are physically located
in many cases.
So we'll try it out and you'll see exactly how accurate or inaccurate in some cases it is.
And what they want you to be aware of if you go down to the very bottom of this documentation you'll
see a quick note down here this geolocation API might not work so well if you're located in China.
So there might be other locations around the globe.
If you're in some far off location might have a tough time to get your exact location.
But if it fails entirely.
I've got a good work around that you can very easily use and I'll show you that workaround in just a
little bit.
OK.
So let's try this out.
I'm going to flip back over to my code editor and find my app component inside of your.
I'm going to make a call to that geolocation API.
I'm going to call window navigator geo location and notice that the L here is lower case not capital.
And then I'll say get current position and when we call this function it's not going to instantly return
our position.
Instead it's going to take some amount of time for this function to determine exactly where our user
is.
So in order to get a response from this or to get some information about where that user is located
we have to pass in two separate function callbacks.
The first argument is going to be a function callback that gets cold any time at this function or get
good position successfully gets the user's location.
So I'm going to enter in a callback right here.
I'm going to take the first argument to this callback which we will call position and for right now
I'm just going to console log that position like so.
All right.
So that's Argument number one or a callback number one.
We frequently refer to this as the success callback because this is the callback that gets called Anytime
that everything goes as planned and they're going to put a comma over here and then enter and the second
argument which we've frequently referred to as the failure callback because as you might guess the second
callback is going to be called any time that the get current position function is unable to determine
the user's physical location.
So I'm going to put in a second callback here that will be called with some air.
I'm going to refer to this as LRR short for air and again for right now I'll just go ahead and Ansal
like that.
Like so OK.
So I save this.
You'll notice that my code formatter pulled away those parentheses.
But what you see here is completely equivalent to what we just had.
So I'm going to now flip back on my browser and we'll see what happens.
Write so once back over here I'm going to open up my chrome Inspector like so and you'll notice that
I already got my location console log over here.
Chances are you're going to see a little pop up that says local host 3000.
Wants to know your current location.
So if you see that little window go ahead and click allow.
Then after a couple of seconds like three four or five or maybe even 10 seconds or so you should eventually
see something here that says position will provide you with the guess of the latitude and longitude
of your current user.
Now if you do not see a position like this if you eventually see an error message pop up or something
like that that's totally OK.
So I want to show you a quick little work around to make sure that no matter what as we are testing
this application you will be able to get some physician callback like this.
So if you get an error message you're going to hit escape.
This is going to pull open this cancel menu and might pop up down here if you're already on this council.
On that dot dot dot right next to the word counsel right there.
You click on the dot dot dot and then select sensor's and then inside a sensors you'll see that there
is this thing called a geo location override.
So this is going to force your location to appear as being one of these different locations on these
different presets right here.
For example I might select San Francisco now.
Any time that I attempt to do some geolocation call my location is going to be automatically returned
to San Francisco.
So like I said you should only have to do that if you run into some type of error message when you get
back this position.
All right so now I'm going to refresh again and I'll see that my coordinates are identical to the preset
of San Francisco right here.
I've got that thirty seven point seven and the negative 122 point four.
OK.
So now we have a pretty good idea of how we can get our users location like their actual physical location
at the end of the day.
We're basically just going to use this position object right here to get that latitude because the latitude
is going to tell us whether or not the user is in the northern hemisphere or the southern hemisphere.
Remember that was kind of condition number one for deciding exactly where is it here we go for deciding
exactly whether or not it is winter or summer.
All right.
Let's take a quick pause right here.
When we come back the next section we're going to start to use this position inside of our app component.
So we'll see you in just a minute.