Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,440 --> 00:00:04,150 So now that you have a good understanding 2 2 00:00:04,150 --> 00:00:06,050 of how we plan a project 3 3 00:00:06,050 --> 00:00:09,360 and build a flow chart using user stories, 4 4 00:00:09,360 --> 00:00:13,430 it's time to start working on the project itself. 5 5 00:00:13,430 --> 00:00:17,633 So let's now learn how to use the Geolocation API. 6 6 00:00:19,350 --> 00:00:23,280 And the Geolocation API is called an API 7 7 00:00:23,280 --> 00:00:26,260 because it is in fact, a browser API 8 8 00:00:26,260 --> 00:00:29,700 just like for example, internationalization 9 9 00:00:29,700 --> 00:00:34,230 or timers, or really anything that the browser gives us. 10 10 00:00:34,230 --> 00:00:37,600 And so Geolocation is just another API 11 11 00:00:37,600 --> 00:00:41,360 like that, but it's also a very modern one, 12 12 00:00:41,360 --> 00:00:44,290 and actually there are many other modern APIs 13 13 00:00:44,290 --> 00:00:48,890 like that, for example, to access the user's camera 14 14 00:00:48,890 --> 00:00:51,400 or even to make a user's phone vibrate. 15 15 00:00:51,400 --> 00:00:54,950 So there's all kinds of crazy stuff that you can do, 16 16 00:00:54,950 --> 00:00:59,100 but in this project, let's simply focus on Geolocation. 17 17 00:00:59,100 --> 00:01:03,030 And geolocation is actually very, very easy to use. 18 18 00:01:03,030 --> 00:01:07,043 All you have to do is navigator.geolocation. 19 19 00:01:09,760 --> 00:01:11,550 So VS code is already showing it 20 20 00:01:11,550 --> 00:01:14,460 to me and then get 21 21 00:01:15,820 --> 00:01:17,760 current position. 22 22 00:01:17,760 --> 00:01:19,300 And now this function here takes 23 23 00:01:19,300 --> 00:01:21,695 as an input to Callback functions. 24 24 00:01:21,695 --> 00:01:24,120 And the first one is to Callback function 25 25 00:01:24,120 --> 00:01:26,400 that will be called on success. 26 26 00:01:26,400 --> 00:01:29,970 So whenever the browser successfully got the coordinates 27 27 00:01:29,970 --> 00:01:32,490 of the current position of the user 28 28 00:01:32,490 --> 00:01:35,290 and to second callback is the Error Callback 29 29 00:01:35,290 --> 00:01:36,500 which is the one that is gonna 30 30 00:01:36,500 --> 00:01:39,100 be called when there happened an error 31 31 00:01:39,100 --> 00:01:41,490 while getting the coordinates. 32 32 00:01:41,490 --> 00:01:44,173 So let's simply define two functions here. 33 33 00:01:45,170 --> 00:01:48,203 So this is the success one, and this is the error one. 34 34 00:01:49,060 --> 00:01:51,603 And let's actually simply start with this one. 35 35 00:01:53,630 --> 00:01:56,043 And here we will simply do an alert. 36 36 00:01:56,920 --> 00:02:00,890 So like this could not get 37 37 00:02:00,890 --> 00:02:03,420 your position 38 38 00:02:04,970 --> 00:02:06,953 and now about the Success Callback. 39 39 00:02:08,190 --> 00:02:11,130 And this callback function here is actually called 40 40 00:02:11,130 --> 00:02:15,730 with a parameter, which we call the Position Parameter. 41 41 00:02:15,730 --> 00:02:17,850 So we can define it here. 42 42 00:02:17,850 --> 00:02:20,850 And as always, we can give it any name that we want. 43 43 00:02:20,850 --> 00:02:23,970 It is simply JavaScript who will call this function here 44 44 00:02:23,970 --> 00:02:25,540 in case of success. 45 45 00:02:25,540 --> 00:02:27,350 And it will pass in an argument 46 46 00:02:27,350 --> 00:02:29,560 and we can then use that here. 47 47 00:02:29,560 --> 00:02:32,653 And so for now, let's simply log it to the console. 48 48 00:02:34,950 --> 00:02:37,860 And that's actually it already. 49 49 00:02:37,860 --> 00:02:40,720 Now just to make sure that we don't get any errors 50 50 00:02:40,720 --> 00:02:42,960 in an old browser, we can test 51 51 00:02:42,960 --> 00:02:47,023 if this navigator.geolocation actually exists. 52 52 00:02:47,910 --> 00:02:48,780 So let's just say 53 53 00:02:48,780 --> 00:02:52,140 if navigation 54 54 00:02:52,140 --> 00:02:55,680 or navigator.geolocation. 55 55 00:02:55,680 --> 00:03:00,680 So if that exists, well then basically do all of this. 56 56 00:03:00,750 --> 00:03:02,260 So let's check it, 57 57 00:03:02,260 --> 00:03:05,200 and actually I already have the page running, 58 58 00:03:05,200 --> 00:03:07,860 but it's here on this other side 59 59 00:03:07,860 --> 00:03:10,950 because it takes up too much space. 60 60 00:03:10,950 --> 00:03:14,380 But anyway, here, you already see dead popup window 61 61 00:03:14,380 --> 00:03:19,380 from the browser asking for permission to use your location. 62 62 00:03:19,450 --> 00:03:21,600 And so let's actually start 63 63 00:03:21,600 --> 00:03:24,763 by clicking on Block just to see what happens then. 64 64 00:03:26,480 --> 00:03:28,990 And so, as you see, this is a situation 65 65 00:03:28,990 --> 00:03:32,140 in which there is an error getting the coordinates. 66 66 00:03:32,140 --> 00:03:34,600 And so therefore we then get this alert 67 67 00:03:34,600 --> 00:03:36,273 that we specified down here. 68 68 00:03:37,875 --> 00:03:38,708 All right. 69 69 00:03:39,580 --> 00:03:40,920 But anyway, let's go back 70 70 00:03:43,150 --> 00:03:45,650 and we can then click here on this icon 71 71 00:03:45,650 --> 00:03:49,600 on this right side, and then clear these settings. 72 72 00:03:49,600 --> 00:03:52,380 So I have blocked tracking the location 73 73 00:03:52,380 --> 00:03:56,020 but now I want to actually make it work when I reload, 74 74 00:03:56,020 --> 00:03:58,080 and so I need to clear that setting 75 75 00:03:58,080 --> 00:04:00,260 so that now it's gonna ask me again 76 76 00:04:00,260 --> 00:04:04,803 this time I allow, and now let's take a look at the console. 77 77 00:04:07,660 --> 00:04:10,993 And so here, indeed, we get this position object. 78 78 00:04:12,140 --> 00:04:14,820 All right, and the thing that we are interested in 79 79 00:04:14,820 --> 00:04:16,490 is already here. 80 80 00:04:16,490 --> 00:04:17,990 So that's these coordinates 81 81 00:04:17,990 --> 00:04:20,473 with this latitude and this longitude. 82 82 00:04:21,660 --> 00:04:24,060 Let's see what else we have in there. 83 83 00:04:24,060 --> 00:04:25,973 So we also have altitude, 84 84 00:04:27,150 --> 00:04:30,940 we have speed, but these are probably only available 85 85 00:04:30,940 --> 00:04:33,850 like on mobile phones, because I guess that 86 86 00:04:33,850 --> 00:04:35,573 like most computers don't have a way 87 87 00:04:35,573 --> 00:04:37,323 of knowing the altitude, 88 88 00:04:38,620 --> 00:04:41,210 but anyway let's now get this latitude 89 89 00:04:41,210 --> 00:04:44,020 and the longitude from this object. 90 90 00:04:44,020 --> 00:04:45,720 So remember they're called latitude 91 91 00:04:45,720 --> 00:04:50,720 and longitude and they are inside of this coord's object. 92 92 00:04:51,270 --> 00:04:54,463 So this is a child object of this bigger object. 93 93 00:04:55,380 --> 00:05:00,340 And so let's not take the positions out of the object. 94 94 00:05:00,340 --> 00:05:03,110 So actually the coordinates out of the object. 95 95 00:05:03,110 --> 00:05:04,960 And so let's simply do, 96 96 00:05:04,960 --> 00:05:09,960 const latitude=position.coords, 97 97 00:05:14,560 --> 00:05:17,200 and now we could write .latitude 98 98 00:05:17,200 --> 00:05:19,380 like this, but even better, 99 99 00:05:19,380 --> 00:05:21,313 we can simply use this structuring. 100 100 00:05:22,260 --> 00:05:23,260 And so this will then create 101 101 00:05:23,260 --> 00:05:25,840 a variable called latitude based 102 102 00:05:25,840 --> 00:05:29,543 out of the latitude property of this object. 103 103 00:05:30,520 --> 00:05:32,913 And now the same for the longitude. 104 104 00:05:37,960 --> 00:05:39,460 So just to see if this worked, 105 105 00:05:44,420 --> 00:05:46,063 let's just reload here again. 106 106 00:05:47,130 --> 00:05:49,660 And so indeed, here are the coordinates 107 107 00:05:49,660 --> 00:05:51,730 of my current location. 108 108 00:05:51,730 --> 00:05:55,080 They are certainly not 100% accurate 109 109 00:05:55,080 --> 00:05:58,100 but we should be able to work with them. 110 110 00:05:58,100 --> 00:06:00,380 Now, what I want to do with his coordinates 111 111 00:06:00,380 --> 00:06:02,360 will be of course to load the map 112 112 00:06:02,360 --> 00:06:05,240 and then center that map on this position. 113 113 00:06:05,240 --> 00:06:08,300 And so in the next lecture, we're actually gonna do that 114 114 00:06:08,300 --> 00:06:11,880 but for now let's simply very quickly create a link 115 115 00:06:11,880 --> 00:06:14,507 on Google maps, okay. 116 116 00:06:14,507 --> 00:06:18,193 So let me quickly open up Google maps here. 117 117 00:06:20,940 --> 00:06:24,570 And so the way the URLs work 118 118 00:06:24,570 --> 00:06:27,480 on Google maps is that we have this URL 119 119 00:06:27,480 --> 00:06:30,933 and then here we have the latitude and here the longitude. 120 120 00:06:32,030 --> 00:06:36,000 And so it's very simple to build a URL like this. 121 121 00:06:36,000 --> 00:06:38,083 Let's just copy this very quick. 122 122 00:06:41,400 --> 00:06:43,623 Then here creating a template literal. 123 123 00:06:44,880 --> 00:06:46,713 This part here is not important. 124 124 00:06:47,900 --> 00:06:51,173 And so this here is gonna be the latitude, 125 125 00:06:54,800 --> 00:06:57,113 and then here the longitude. 126 126 00:07:00,500 --> 00:07:01,433 Give it a safe, 127 127 00:07:03,760 --> 00:07:05,520 and now here is that link, 128 128 00:07:05,520 --> 00:07:08,680 and I think I need to make it a bit bigger here actually 129 129 00:07:08,680 --> 00:07:09,513 for you. 130 130 00:07:11,270 --> 00:07:16,270 And now we can right click here and then open a new tab, 131 131 00:07:16,350 --> 00:07:19,373 and indeed here is Google maps on my current location. 132 132 00:07:21,240 --> 00:07:24,323 All right, and no matter where I go, 133 133 00:07:25,370 --> 00:07:27,390 well, actually it changes the URL. 134 134 00:07:27,390 --> 00:07:30,580 So nevermind, but yeah, 135 135 00:07:30,580 --> 00:07:33,410 you should try to do that on your own, of course, 136 136 00:07:33,410 --> 00:07:35,960 and then it will take you to your current location 137 137 00:07:35,960 --> 00:07:37,860 where you are right now. 138 138 00:07:37,860 --> 00:07:40,800 So of course your numbers here are gonna look different 139 139 00:07:40,800 --> 00:07:42,130 than mine. 140 140 00:07:42,130 --> 00:07:44,520 But if you create a link like this, 141 141 00:07:44,520 --> 00:07:48,070 then that will take you to your current position on the map, 142 142 00:07:48,070 --> 00:07:51,090 and I think that's really cool already. 143 143 00:07:51,090 --> 00:07:52,960 So this was of course 144 144 00:07:52,960 --> 00:07:56,810 just to see how Geolocation actually works in JavaScript. 145 145 00:07:56,810 --> 00:07:58,140 And now in the next video, 146 146 00:07:58,140 --> 00:08:02,080 we will use a third party script to basically load a map 147 147 00:08:02,080 --> 00:08:06,750 and display it here on the right side of our user interface. 148 148 00:08:06,750 --> 00:08:11,360 So on this part here, we want a map just like in our demo, 149 149 00:08:11,360 --> 00:08:14,343 and so that's gonna be the task in the next video. 12835