1 00:00:00,560 --> 00:00:05,900 In this video we're going to learn how we can determine the user's physical location in the world using 2 00:00:05,990 --> 00:00:09,790 just functions that are built into most modern browsers. 3 00:00:10,010 --> 00:00:12,920 So believe it or not it's going to be pretty straightforward. 4 00:00:12,920 --> 00:00:16,400 Are going to be using something called the geo location API. 5 00:00:16,400 --> 00:00:18,960 Like I mentioned this is built into most modern browsers. 6 00:00:19,070 --> 00:00:23,780 And there's actually a tremendous amount of documentation about it online if you want to you could pull 7 00:00:23,810 --> 00:00:28,690 open the Mozilla or Indian documentation on this to read a little bit more about it. 8 00:00:28,700 --> 00:00:31,070 Now I've got the documentation open right here. 9 00:00:31,160 --> 00:00:34,550 This is the Indian or Mozilla developers network. 10 00:00:34,550 --> 00:00:39,470 So you can read a little bit about it if you want to essentially already going to do is get the users 11 00:00:39,500 --> 00:00:40,850 current position. 12 00:00:40,850 --> 00:00:46,490 This is a function that is going to make an educated guess about where the user is physically located 13 00:00:46,820 --> 00:00:52,370 depending upon a couple of different parameters such as the user's IP address different Wi-Fi networks 14 00:00:52,370 --> 00:00:57,300 that are visible in the area and other similar little tidbits of information. 15 00:00:57,320 --> 00:01:02,360 In practice it can actually come up with a very very good guess of where you are physically located 16 00:01:02,540 --> 00:01:04,000 in many cases. 17 00:01:04,010 --> 00:01:09,740 So we'll try it out and you'll see exactly how accurate or inaccurate in some cases it is. 18 00:01:09,980 --> 00:01:14,310 And what they want you to be aware of if you go down to the very bottom of this documentation you'll 19 00:01:14,300 --> 00:01:21,870 see a quick note down here this geolocation API might not work so well if you're located in China. 20 00:01:21,870 --> 00:01:23,810 So there might be other locations around the globe. 21 00:01:23,820 --> 00:01:29,590 If you're in some far off location might have a tough time to get your exact location. 22 00:01:29,700 --> 00:01:31,220 But if it fails entirely. 23 00:01:31,230 --> 00:01:35,190 I've got a good work around that you can very easily use and I'll show you that workaround in just a 24 00:01:35,190 --> 00:01:36,180 little bit. 25 00:01:36,600 --> 00:01:36,840 OK. 26 00:01:36,870 --> 00:01:38,260 So let's try this out. 27 00:01:38,370 --> 00:01:43,180 I'm going to flip back over to my code editor and find my app component inside of your. 28 00:01:43,200 --> 00:01:46,670 I'm going to make a call to that geolocation API. 29 00:01:46,800 --> 00:01:54,850 I'm going to call window navigator geo location and notice that the L here is lower case not capital. 30 00:01:54,900 --> 00:02:01,570 And then I'll say get current position and when we call this function it's not going to instantly return 31 00:02:01,600 --> 00:02:02,710 our position. 32 00:02:02,710 --> 00:02:06,880 Instead it's going to take some amount of time for this function to determine exactly where our user 33 00:02:06,880 --> 00:02:07,650 is. 34 00:02:07,900 --> 00:02:12,430 So in order to get a response from this or to get some information about where that user is located 35 00:02:12,730 --> 00:02:16,700 we have to pass in two separate function callbacks. 36 00:02:16,780 --> 00:02:21,920 The first argument is going to be a function callback that gets cold any time at this function or get 37 00:02:21,920 --> 00:02:25,690 good position successfully gets the user's location. 38 00:02:25,690 --> 00:02:27,800 So I'm going to enter in a callback right here. 39 00:02:28,880 --> 00:02:34,040 I'm going to take the first argument to this callback which we will call position and for right now 40 00:02:34,190 --> 00:02:38,130 I'm just going to console log that position like so. 41 00:02:38,140 --> 00:02:38,360 All right. 42 00:02:38,360 --> 00:02:41,390 So that's Argument number one or a callback number one. 43 00:02:41,620 --> 00:02:46,600 We frequently refer to this as the success callback because this is the callback that gets called Anytime 44 00:02:46,660 --> 00:02:52,480 that everything goes as planned and they're going to put a comma over here and then enter and the second 45 00:02:52,480 --> 00:02:57,700 argument which we've frequently referred to as the failure callback because as you might guess the second 46 00:02:57,700 --> 00:03:02,800 callback is going to be called any time that the get current position function is unable to determine 47 00:03:02,800 --> 00:03:05,170 the user's physical location. 48 00:03:05,170 --> 00:03:09,220 So I'm going to put in a second callback here that will be called with some air. 49 00:03:09,220 --> 00:03:15,990 I'm going to refer to this as LRR short for air and again for right now I'll just go ahead and Ansal 50 00:03:16,000 --> 00:03:16,470 like that. 51 00:03:16,540 --> 00:03:18,570 Like so OK. 52 00:03:18,810 --> 00:03:19,770 So I save this. 53 00:03:19,770 --> 00:03:22,520 You'll notice that my code formatter pulled away those parentheses. 54 00:03:22,530 --> 00:03:25,750 But what you see here is completely equivalent to what we just had. 55 00:03:26,160 --> 00:03:29,290 So I'm going to now flip back on my browser and we'll see what happens. 56 00:03:30,350 --> 00:03:38,380 Write so once back over here I'm going to open up my chrome Inspector like so and you'll notice that 57 00:03:38,410 --> 00:03:41,260 I already got my location console log over here. 58 00:03:41,260 --> 00:03:45,070 Chances are you're going to see a little pop up that says local host 3000. 59 00:03:45,070 --> 00:03:46,940 Wants to know your current location. 60 00:03:47,020 --> 00:03:50,160 So if you see that little window go ahead and click allow. 61 00:03:50,230 --> 00:03:56,350 Then after a couple of seconds like three four or five or maybe even 10 seconds or so you should eventually 62 00:03:56,350 --> 00:04:02,650 see something here that says position will provide you with the guess of the latitude and longitude 63 00:04:02,890 --> 00:04:04,710 of your current user. 64 00:04:04,720 --> 00:04:09,730 Now if you do not see a position like this if you eventually see an error message pop up or something 65 00:04:09,730 --> 00:04:11,610 like that that's totally OK. 66 00:04:11,770 --> 00:04:15,850 So I want to show you a quick little work around to make sure that no matter what as we are testing 67 00:04:15,850 --> 00:04:20,120 this application you will be able to get some physician callback like this. 68 00:04:20,140 --> 00:04:23,710 So if you get an error message you're going to hit escape. 69 00:04:24,040 --> 00:04:29,320 This is going to pull open this cancel menu and might pop up down here if you're already on this council. 70 00:04:30,570 --> 00:04:34,060 On that dot dot dot right next to the word counsel right there. 71 00:04:34,060 --> 00:04:40,020 You click on the dot dot dot and then select sensor's and then inside a sensors you'll see that there 72 00:04:40,020 --> 00:04:42,950 is this thing called a geo location override. 73 00:04:42,950 --> 00:04:48,320 So this is going to force your location to appear as being one of these different locations on these 74 00:04:48,320 --> 00:04:49,930 different presets right here. 75 00:04:50,030 --> 00:04:52,950 For example I might select San Francisco now. 76 00:04:52,970 --> 00:04:58,760 Any time that I attempt to do some geolocation call my location is going to be automatically returned 77 00:04:58,760 --> 00:05:00,050 to San Francisco. 78 00:05:00,050 --> 00:05:05,000 So like I said you should only have to do that if you run into some type of error message when you get 79 00:05:05,000 --> 00:05:07,040 back this position. 80 00:05:07,040 --> 00:05:13,350 All right so now I'm going to refresh again and I'll see that my coordinates are identical to the preset 81 00:05:13,380 --> 00:05:14,670 of San Francisco right here. 82 00:05:14,670 --> 00:05:18,930 I've got that thirty seven point seven and the negative 122 point four. 83 00:05:19,380 --> 00:05:19,620 OK. 84 00:05:19,650 --> 00:05:24,960 So now we have a pretty good idea of how we can get our users location like their actual physical location 85 00:05:25,560 --> 00:05:26,310 at the end of the day. 86 00:05:26,340 --> 00:05:32,340 We're basically just going to use this position object right here to get that latitude because the latitude 87 00:05:32,340 --> 00:05:37,680 is going to tell us whether or not the user is in the northern hemisphere or the southern hemisphere. 88 00:05:37,720 --> 00:05:43,530 Remember that was kind of condition number one for deciding exactly where is it here we go for deciding 89 00:05:43,560 --> 00:05:47,090 exactly whether or not it is winter or summer. 90 00:05:47,100 --> 00:05:47,320 All right. 91 00:05:47,340 --> 00:05:48,610 Let's take a quick pause right here. 92 00:05:48,630 --> 00:05:54,180 When we come back the next section we're going to start to use this position inside of our app component. 93 00:05:54,180 --> 00:05:55,800 So we'll see you in just a minute.