WEBVTT 1 00:00:01.440 --> 00:00:04.150 So now that you have a good understanding 2 00:00:04.150 --> 00:00:06.050 of how we plan a project 3 00:00:06.050 --> 00:00:09.360 and build a flow chart using user stories, 4 00:00:09.360 --> 00:00:13.430 it's time to start working on the project itself. 5 00:00:13.430 --> 00:00:17.633 So let's now learn how to use the Geolocation API. 6 00:00:19.350 --> 00:00:23.280 And the Geolocation API is called an API 7 00:00:23.280 --> 00:00:26.260 because it is in fact, a browser API 8 00:00:26.260 --> 00:00:29.700 just like for example, internationalization 9 00:00:29.700 --> 00:00:34.230 or timers, or really anything that the browser gives us. 10 00:00:34.230 --> 00:00:37.600 And so Geolocation is just another API 11 00:00:37.600 --> 00:00:41.360 like that, but it's also a very modern one, 12 00:00:41.360 --> 00:00:44.290 and actually there are many other modern APIs 13 00:00:44.290 --> 00:00:48.890 like that, for example, to access the user's camera 14 00:00:48.890 --> 00:00:51.400 or even to make a user's phone vibrate. 15 00:00:51.400 --> 00:00:54.950 So there's all kinds of crazy stuff that you can do, 16 00:00:54.950 --> 00:00:59.100 but in this project, let's simply focus on Geolocation. 17 00:00:59.100 --> 00:01:03.030 And geolocation is actually very, very easy to use. 18 00:01:03.030 --> 00:01:07.043 All you have to do is navigator.geolocation. 19 00:01:09.760 --> 00:01:11.550 So VS code is already showing it 20 00:01:11.550 --> 00:01:14.460 to me and then get 21 00:01:15.820 --> 00:01:17.760 current position. 22 00:01:17.760 --> 00:01:19.300 And now this function here takes 23 00:01:19.300 --> 00:01:21.695 as an input to Callback functions. 24 00:01:21.695 --> 00:01:24.120 And the first one is to Callback function 25 00:01:24.120 --> 00:01:26.400 that will be called on success. 26 00:01:26.400 --> 00:01:29.970 So whenever the browser successfully got the coordinates 27 00:01:29.970 --> 00:01:32.490 of the current position of the user 28 00:01:32.490 --> 00:01:35.290 and to second callback is the Error Callback 29 00:01:35.290 --> 00:01:36.500 which is the one that is gonna 30 00:01:36.500 --> 00:01:39.100 be called when there happened an error 31 00:01:39.100 --> 00:01:41.490 while getting the coordinates. 32 00:01:41.490 --> 00:01:44.173 So let's simply define two functions here. 33 00:01:45.170 --> 00:01:48.203 So this is the success one, and this is the error one. 34 00:01:49.060 --> 00:01:51.603 And let's actually simply start with this one. 35 00:01:53.630 --> 00:01:56.043 And here we will simply do an alert. 36 00:01:56.920 --> 00:02:00.890 So like this could not get 37 00:02:00.890 --> 00:02:03.420 your position 38 00:02:04.970 --> 00:02:06.953 and now about the Success Callback. 39 00:02:08.190 --> 00:02:11.130 And this callback function here is actually called 40 00:02:11.130 --> 00:02:15.730 with a parameter, which we call the Position Parameter. 41 00:02:15.730 --> 00:02:17.850 So we can define it here. 42 00:02:17.850 --> 00:02:20.850 And as always, we can give it any name that we want. 43 00:02:20.850 --> 00:02:23.970 It is simply JavaScript who will call this function here 44 00:02:23.970 --> 00:02:25.540 in case of success. 45 00:02:25.540 --> 00:02:27.350 And it will pass in an argument 46 00:02:27.350 --> 00:02:29.560 and we can then use that here. 47 00:02:29.560 --> 00:02:32.653 And so for now, let's simply log it to the console. 48 00:02:34.950 --> 00:02:37.860 And that's actually it already. 49 00:02:37.860 --> 00:02:40.720 Now just to make sure that we don't get any errors 50 00:02:40.720 --> 00:02:42.960 in an old browser, we can test 51 00:02:42.960 --> 00:02:47.023 if this navigator.geolocation actually exists. 52 00:02:47.910 --> 00:02:48.780 So let's just say 53 00:02:48.780 --> 00:02:52.140 if navigation 54 00:02:52.140 --> 00:02:55.680 or navigator.geolocation. 55 00:02:55.680 --> 00:03:00.680 So if that exists, well then basically do all of this. 56 00:03:00.750 --> 00:03:02.260 So let's check it, 57 00:03:02.260 --> 00:03:05.200 and actually I already have the page running, 58 00:03:05.200 --> 00:03:07.860 but it's here on this other side 59 00:03:07.860 --> 00:03:10.950 because it takes up too much space. 60 00:03:10.950 --> 00:03:14.380 But anyway, here, you already see dead popup window 61 00:03:14.380 --> 00:03:19.380 from the browser asking for permission to use your location. 62 00:03:19.450 --> 00:03:21.600 And so let's actually start 63 00:03:21.600 --> 00:03:24.763 by clicking on Block just to see what happens then. 64 00:03:26.480 --> 00:03:28.990 And so, as you see, this is a situation 65 00:03:28.990 --> 00:03:32.140 in which there is an error getting the coordinates. 66 00:03:32.140 --> 00:03:34.600 And so therefore we then get this alert 67 00:03:34.600 --> 00:03:36.273 that we specified down here. 68 00:03:37.875 --> 00:03:38.708 All right. 69 00:03:39.580 --> 00:03:40.920 But anyway, let's go back 70 00:03:43.150 --> 00:03:45.650 and we can then click here on this icon 71 00:03:45.650 --> 00:03:49.600 on this right side, and then clear these settings. 72 00:03:49.600 --> 00:03:52.380 So I have blocked tracking the location 73 00:03:52.380 --> 00:03:56.020 but now I want to actually make it work when I reload, 74 00:03:56.020 --> 00:03:58.080 and so I need to clear that setting 75 00:03:58.080 --> 00:04:00.260 so that now it's gonna ask me again 76 00:04:00.260 --> 00:04:04.803 this time I allow, and now let's take a look at the console. 77 00:04:07.660 --> 00:04:10.993 And so here, indeed, we get this position object. 78 00:04:12.140 --> 00:04:14.820 All right, and the thing that we are interested in 79 00:04:14.820 --> 00:04:16.490 is already here. 80 00:04:16.490 --> 00:04:17.990 So that's these coordinates 81 00:04:17.990 --> 00:04:20.473 with this latitude and this longitude. 82 00:04:21.660 --> 00:04:24.060 Let's see what else we have in there. 83 00:04:24.060 --> 00:04:25.973 So we also have altitude, 84 00:04:27.150 --> 00:04:30.940 we have speed, but these are probably only available 85 00:04:30.940 --> 00:04:33.850 like on mobile phones, because I guess that 86 00:04:33.850 --> 00:04:35.573 like most computers don't have a way 87 00:04:35.573 --> 00:04:37.323 of knowing the altitude, 88 00:04:38.620 --> 00:04:41.210 but anyway let's now get this latitude 89 00:04:41.210 --> 00:04:44.020 and the longitude from this object. 90 00:04:44.020 --> 00:04:45.720 So remember they're called latitude 91 00:04:45.720 --> 00:04:50.720 and longitude and they are inside of this coord's object. 92 00:04:51.270 --> 00:04:54.463 So this is a child object of this bigger object. 93 00:04:55.380 --> 00:05:00.340 And so let's not take the positions out of the object. 94 00:05:00.340 --> 00:05:03.110 So actually the coordinates out of the object. 95 00:05:03.110 --> 00:05:04.960 And so let's simply do, 96 00:05:04.960 --> 00:05:09.960 const latitude=position.coords, 97 00:05:14.560 --> 00:05:17.200 and now we could write .latitude 98 00:05:17.200 --> 00:05:19.380 like this, but even better, 99 00:05:19.380 --> 00:05:21.313 we can simply use this structuring. 100 00:05:22.260 --> 00:05:23.260 And so this will then create 101 00:05:23.260 --> 00:05:25.840 a variable called latitude based 102 00:05:25.840 --> 00:05:29.543 out of the latitude property of this object. 103 00:05:30.520 --> 00:05:32.913 And now the same for the longitude. 104 00:05:37.960 --> 00:05:39.460 So just to see if this worked, 105 00:05:44.420 --> 00:05:46.063 let's just reload here again. 106 00:05:47.130 --> 00:05:49.660 And so indeed, here are the coordinates 107 00:05:49.660 --> 00:05:51.730 of my current location. 108 00:05:51.730 --> 00:05:55.080 They are certainly not 100% accurate 109 00:05:55.080 --> 00:05:58.100 but we should be able to work with them. 110 00:05:58.100 --> 00:06:00.380 Now, what I want to do with his coordinates 111 00:06:00.380 --> 00:06:02.360 will be of course to load the map 112 00:06:02.360 --> 00:06:05.240 and then center that map on this position. 113 00:06:05.240 --> 00:06:08.300 And so in the next lecture, we're actually gonna do that 114 00:06:08.300 --> 00:06:11.880 but for now let's simply very quickly create a link 115 00:06:11.880 --> 00:06:14.507 on Google maps, okay. 116 00:06:14.507 --> 00:06:18.193 So let me quickly open up Google maps here. 117 00:06:20.940 --> 00:06:24.570 And so the way the URLs work 118 00:06:24.570 --> 00:06:27.480 on Google maps is that we have this URL 119 00:06:27.480 --> 00:06:30.933 and then here we have the latitude and here the longitude. 120 00:06:32.030 --> 00:06:36.000 And so it's very simple to build a URL like this. 121 00:06:36.000 --> 00:06:38.083 Let's just copy this very quick. 122 00:06:41.400 --> 00:06:43.623 Then here creating a template literal. 123 00:06:44.880 --> 00:06:46.713 This part here is not important. 124 00:06:47.900 --> 00:06:51.173 And so this here is gonna be the latitude, 125 00:06:54.800 --> 00:06:57.113 and then here the longitude. 126 00:07:00.500 --> 00:07:01.433 Give it a safe, 127 00:07:03.760 --> 00:07:05.520 and now here is that link, 128 00:07:05.520 --> 00:07:08.680 and I think I need to make it a bit bigger here actually 129 00:07:08.680 --> 00:07:09.513 for you. 130 00:07:11.270 --> 00:07:16.270 And now we can right click here and then open a new tab, 131 00:07:16.350 --> 00:07:19.373 and indeed here is Google maps on my current location. 132 00:07:21.240 --> 00:07:24.323 All right, and no matter where I go, 133 00:07:25.370 --> 00:07:27.390 well, actually it changes the URL. 134 00:07:27.390 --> 00:07:30.580 So nevermind, but yeah, 135 00:07:30.580 --> 00:07:33.410 you should try to do that on your own, of course, 136 00:07:33.410 --> 00:07:35.960 and then it will take you to your current location 137 00:07:35.960 --> 00:07:37.860 where you are right now. 138 00:07:37.860 --> 00:07:40.800 So of course your numbers here are gonna look different 139 00:07:40.800 --> 00:07:42.130 than mine. 140 00:07:42.130 --> 00:07:44.520 But if you create a link like this, 141 00:07:44.520 --> 00:07:48.070 then that will take you to your current position on the map, 142 00:07:48.070 --> 00:07:51.090 and I think that's really cool already. 143 00:07:51.090 --> 00:07:52.960 So this was of course 144 00:07:52.960 --> 00:07:56.810 just to see how Geolocation actually works in JavaScript. 145 00:07:56.810 --> 00:07:58.140 And now in the next video, 146 00:07:58.140 --> 00:08:02.080 we will use a third party script to basically load a map 147 00:08:02.080 --> 00:08:06.750 and display it here on the right side of our user interface. 148 00:08:06.750 --> 00:08:11.360 So on this part here, we want a map just like in our demo, 149 00:08:11.360 --> 00:08:14.343 and so that's gonna be the task in the next video.