1 00:00:08,210 --> 00:00:09,500 Welcome back. 2 00:00:09,530 --> 00:00:18,650 In this video, let's build an application called Get My Location using the built in Geo Location API. 3 00:00:18,830 --> 00:00:28,580 So when I click on Get my location, it's going to give me my current location and indeed I am in Shanghai. 4 00:00:28,820 --> 00:00:37,030 Well, I will show you some technique because for geo location API it gives us all the coordinates. 5 00:00:37,040 --> 00:00:39,760 So I will show you how I got this one done. 6 00:00:39,770 --> 00:00:41,540 So let's get started. 7 00:00:41,720 --> 00:00:49,580 As always, I have provided the starter template for you with a CSS and then the HTML and with a few 8 00:00:49,580 --> 00:00:52,720 lines of JavaScript with some selection. 9 00:00:52,730 --> 00:00:57,620 Again, this section is not about HTML or CSS or HTML. 10 00:00:57,660 --> 00:01:01,250 That is why I have provided this of file for you. 11 00:01:01,280 --> 00:01:06,000 So now let's get started with the job application API. 12 00:01:06,020 --> 00:01:07,440 So here we go. 13 00:01:07,460 --> 00:01:12,980 Let's collapse this one and let's play around with the geolocation API. 14 00:01:13,130 --> 00:01:19,310 So our code is one as your location API. 15 00:01:19,550 --> 00:01:22,240 So let's see how we are going to play around with it. 16 00:01:22,250 --> 00:01:26,800 So first we are going to get the location and here we go. 17 00:01:26,810 --> 00:01:30,470 I'm going to use the end operator for JavaScript. 18 00:01:30,470 --> 00:01:37,550 So I make use of geo location and then in the navigator. 19 00:01:37,670 --> 00:01:39,530 So what does it mean? 20 00:01:39,560 --> 00:01:47,660 It simply means that we are trying to get a property or a method on this object called navigator. 21 00:01:47,690 --> 00:01:53,630 If we have a property called Geo Location on Navigator, it means that it is true. 22 00:01:53,630 --> 00:02:01,720 So here we can go ahead and then console.log say that yes it is true and let's check it out. 23 00:02:01,730 --> 00:02:04,850 So let's open this application that we are building. 24 00:02:04,850 --> 00:02:12,200 We can see that we have some static data here, so let's open the console and non can see that indeed 25 00:02:12,200 --> 00:02:12,870 it is, yes. 26 00:02:12,890 --> 00:02:20,870 Meaning that there is a property on the navigator so we can go ahead and even console the log. 27 00:02:20,870 --> 00:02:25,910 The navigator, which is a global matter. 28 00:02:25,920 --> 00:02:29,450 Then I want the geo location and now let's see. 29 00:02:29,450 --> 00:02:34,700 And this is a geo location, so let's go ahead and then implement that. 30 00:02:34,700 --> 00:02:45,230 So here what we are going to do is that on the Navigator Dot geolocation we have a method called get 31 00:02:45,230 --> 00:02:50,840 current position and for this one we are going to pass in a callback function. 32 00:02:50,840 --> 00:02:56,720 And for this we have access to our position and here we go. 33 00:02:56,720 --> 00:03:03,440 So for this let's console.log the position and let's see, let's check it out inside. 34 00:03:03,440 --> 00:03:11,570 And now you can see that is asking me for permission because this application is trying to access my 35 00:03:11,570 --> 00:03:12,470 location. 36 00:03:12,470 --> 00:03:14,780 So let's click on allow. 37 00:03:14,990 --> 00:03:22,340 As soon as I click on that, I'm going to see my location and here is my position. 38 00:03:22,550 --> 00:03:30,170 And what we want is called the cost, meaning the coordinates, and we want the latitude and then the 39 00:03:30,170 --> 00:03:31,340 longitude. 40 00:03:31,550 --> 00:03:34,250 These are the properties that we need. 41 00:03:34,460 --> 00:03:41,300 And this, all this API gives us, it gives us the longitude and then the latitude. 42 00:03:41,300 --> 00:03:47,930 And if you want to convert this one to real location, let's see how we are going to do it. 43 00:03:47,930 --> 00:03:50,720 So let's copy the latitude, value. 44 00:03:50,720 --> 00:04:01,100 And next step is that let's go to Google.com, slide maps and for this one let's pass in the latitude 45 00:04:01,100 --> 00:04:03,350 and then comma separated. 46 00:04:03,740 --> 00:04:05,930 The next one going to be the longitude. 47 00:04:05,930 --> 00:04:07,670 Copy that one also. 48 00:04:07,820 --> 00:04:12,740 And now let's place it inside after the comma and let's hit such. 49 00:04:14,000 --> 00:04:19,850 And you can see it has given me the same result inside my application. 50 00:04:20,000 --> 00:04:25,990 So we are going to take the latitude and longitude and then place it on the map. 51 00:04:26,000 --> 00:04:28,520 So let's see how we are going to get that one down. 52 00:04:28,520 --> 00:04:33,260 And this what I did in the final project, we can see that for this one. 53 00:04:33,260 --> 00:04:40,520 I pass in the latitude and longitude to Google Map to have something like this in my application. 54 00:04:40,730 --> 00:04:44,420 So what about the details about the country here? 55 00:04:44,690 --> 00:04:51,500 Again, this API does doing gives us the actual information about the location. 56 00:04:51,770 --> 00:04:56,630 So we are going to use a third party API core position stock. 57 00:04:56,630 --> 00:05:01,250 And for this API too, we can build awesome application out of it. 58 00:05:01,400 --> 00:05:08,360 So let me show you how we are going to use this one to display this information about my current location. 59 00:05:08,360 --> 00:05:10,130 So here we go. 60 00:05:10,160 --> 00:05:14,840 So first step is that let's click on Get Free API. 61 00:05:14,870 --> 00:05:23,360 Like I said, some API, we need to pay some free and some give you some free tiers based on the number 62 00:05:23,360 --> 00:05:24,350 of requests. 63 00:05:24,350 --> 00:05:29,180 So let's click on Get Free API and these are the plans. 64 00:05:29,180 --> 00:05:33,200 So what we want is a free one that is for personal use. 65 00:05:33,200 --> 00:05:35,090 There is no card required. 66 00:05:35,090 --> 00:05:38,090 And let's look at the number of requests. 67 00:05:38,240 --> 00:05:41,630 The number of requests is 25 requests. 68 00:05:41,630 --> 00:05:45,860 So make sure that you doesn't exceed this 25 requests. 69 00:05:45,860 --> 00:05:48,200 When you say requests, it's like this one. 70 00:05:48,200 --> 00:05:53,390 Anytime I click on this one and I get new data, that is a request. 71 00:05:53,390 --> 00:05:58,160 If I click again, again, again, it is increasing my requests. 72 00:05:58,160 --> 00:05:59,840 So take note about this. 73 00:06:00,050 --> 00:06:02,180 So make sure that you sign up. 74 00:06:02,180 --> 00:06:08,960 And for this the sign up is pretty easy after signing up or what you need is the API key. 75 00:06:08,960 --> 00:06:11,240 So what is the API key? 76 00:06:11,240 --> 00:06:18,980 The API key is being used by this server called position style to keep track about how you are using 77 00:06:18,980 --> 00:06:20,150 the API. 78 00:06:20,180 --> 00:06:26,870 I already have an API key, so there is no need for me to sign up again in case you have some problem 79 00:06:26,870 --> 00:06:29,450 or difficulties about getting the API key. 80 00:06:29,480 --> 00:06:31,880 Don't worry, leave a question below. 81 00:06:32,120 --> 00:06:39,650 The next step is that let's read the documentation this way is going to guide us how to use the API 82 00:06:39,680 --> 00:06:40,910 and here we go. 83 00:06:41,000 --> 00:06:47,630 You can see that we have what is called getting started an API access key and then the authentication. 84 00:06:47,930 --> 00:06:56,900 So this is a basic endpoint http slash API position stack dot com reg one for and here you pass in the 85 00:06:56,900 --> 00:06:57,920 access key. 86 00:06:57,920 --> 00:07:06,380 And if you scroll down, they have a sample code here and here is it API end point we have forwarding 87 00:07:06,380 --> 00:07:14,540 geocoding meaning that for this you pass in the actual name and when I give you the position about this 88 00:07:14,540 --> 00:07:22,280 location, but what we want is what the reverse meaning that we are going to pass in the longitude and 89 00:07:22,280 --> 00:07:26,150 latitude to give us the data about our location. 90 00:07:26,150 --> 00:07:30,080 So we need this end point so you can copy this one. 91 00:07:30,080 --> 00:07:35,540 And now let's get back to our application and let's pass it like that. 92 00:07:35,540 --> 00:07:37,070 You will come back to it. 93 00:07:37,070 --> 00:07:40,430 So let me comment this one as that's great. 94 00:07:40,430 --> 00:07:43,220 So I'm going to paste my API key. 95 00:07:43,220 --> 00:07:51,470 The API key looks something like this, so I'll paste mine and I will change my API key as I move on. 96 00:07:51,650 --> 00:07:58,280 So now that we have all the ingredients, the next step is that let's finish up with the logic and the 97 00:07:58,280 --> 00:08:00,050 last step is a body map. 98 00:08:00,050 --> 00:08:06,110 The link that want to is an iframe and for the iframe to I'll provide it for you. 99 00:08:06,290 --> 00:08:06,860 Okay. 100 00:08:06,860 --> 00:08:11,180 So for the meantime, let's get done about the location. 101 00:08:11,180 --> 00:08:20,690 So here, let's go ahead and then create a function as a function and then going to be as geo or geo 102 00:08:20,690 --> 00:08:25,190 location and then has the X and here we go. 103 00:08:25,370 --> 00:08:30,290 So inside here, I'm going to tap this one and then place it inside my function. 104 00:08:30,350 --> 00:08:32,630 Now here we go. 105 00:08:32,720 --> 00:08:40,010 So here let's do structure or get the individual properties, the latitude and lat for short. 106 00:08:40,250 --> 00:08:48,860 And for this we can get it from the position, the course and then the latitude and then the longitude 107 00:08:48,860 --> 00:08:57,140 for short as long is equal to position dot course dot longitude and that is it. 108 00:08:57,350 --> 00:09:06,560 So the next step is that I need to embed the whole map into our browser and remember we have the HTML 109 00:09:06,560 --> 00:09:10,070 where we are going to embed the map as the header. 110 00:09:10,220 --> 00:09:13,460 So we are going to select the ID of map. 111 00:09:13,750 --> 00:09:15,400 So here you go. 112 00:09:15,490 --> 00:09:24,130 You're going to be required to copy this one and down here, paste it and change this one to a map of 113 00:09:24,130 --> 00:09:24,700 it. 114 00:09:24,730 --> 00:09:26,240 So now here we go. 115 00:09:26,260 --> 00:09:32,170 So after we got this one, let's go ahead and then inject the whole map into the DOM. 116 00:09:32,170 --> 00:09:41,380 So I will take my map element I selected here on that I'm going to use in a l is equal to something. 117 00:09:41,380 --> 00:09:49,030 And here we need to get the map the map code and we're going to use the eye frame so it looks something 118 00:09:49,030 --> 00:09:49,690 like this. 119 00:09:49,690 --> 00:09:51,030 So let me show you here. 120 00:09:51,070 --> 00:09:54,910 Let me pass the code here and I'll give this one to you the link. 121 00:09:55,120 --> 00:10:03,340 So here you can see that we have the base you are error, which is maps and next is question mark and 122 00:10:03,340 --> 00:10:08,260 then query and here is our value I have added for you automatically. 123 00:10:08,260 --> 00:10:16,360 So here we pass in the latitude and then come on and then the dollar sign and then three bases and then 124 00:10:16,360 --> 00:10:17,560 our longitude. 125 00:10:17,560 --> 00:10:19,600 And that is it guys. 126 00:10:19,600 --> 00:10:20,560 That is it. 127 00:10:20,680 --> 00:10:27,790 So now if I call this function, so let's save it now and let's check our application and let's refresh 128 00:10:27,790 --> 00:10:32,010 it and let's see and you can see that the map is coming. 129 00:10:32,050 --> 00:10:40,720 A And we go back our map, guys, I'm really happy about this, how easy it is. 130 00:10:41,230 --> 00:10:42,130 Great. 131 00:10:42,310 --> 00:10:49,960 So the last step is to get information about my current location, Paris, Shanghai, details. 132 00:10:51,310 --> 00:10:55,270 So let's see how we are going to get that one done. 133 00:10:55,270 --> 00:11:02,050 And again, I don't want to display the map automatically, but instead I want to click on the get my 134 00:11:02,050 --> 00:11:05,470 location and then I'll display the map. 135 00:11:05,470 --> 00:11:09,490 So we are going to add event lists now on the bit. 136 00:11:09,490 --> 00:11:15,250 And so here you go, B, T and dot add event lists now. 137 00:11:15,490 --> 00:11:18,010 And I want the click event. 138 00:11:20,470 --> 00:11:24,070 Then our core, the geo function is that. 139 00:11:24,190 --> 00:11:31,810 And then the next step is what to be able to get the location, the actual location. 140 00:11:31,810 --> 00:11:33,700 So here we go. 141 00:11:33,970 --> 00:11:41,680 So let's create the function down here as const gets location. 142 00:11:42,310 --> 00:11:49,330 And remember, this API requires us to pass in the latitude and longitude. 143 00:11:49,330 --> 00:11:59,500 So this function we are going to pass in the latitude and then the longitude and here we go, because 144 00:11:59,500 --> 00:12:01,920 this one too, we need to handle the promise. 145 00:12:01,930 --> 00:12:06,750 Let's mark our function as an async and inside, try and catch. 146 00:12:06,760 --> 00:12:08,680 Let's go ahead and handle that. 147 00:12:08,980 --> 00:12:15,430 So we are going to make use of the fetch to make a request to that API to get that. 148 00:12:15,430 --> 00:12:17,620 Now fetch has come here again. 149 00:12:17,950 --> 00:12:19,570 So if bring in fetch. 150 00:12:19,660 --> 00:12:25,480 So we need to pass in the you are error and for the you are to our provide for you. 151 00:12:25,480 --> 00:12:35,110 So let me paste that one inside the fetch client when I be back tick and then the bucket because I want 152 00:12:35,110 --> 00:12:43,510 to add the dynamic data and indeed I've added them here as that latitude and longitude. 153 00:12:43,750 --> 00:12:51,090 So the next step is that I need to assign the result coming back from this one as response, if you 154 00:12:51,100 --> 00:12:59,980 see how we did it and now on that, let's go ahead and get the actual data by awaiting the response 155 00:12:59,980 --> 00:13:00,550 dot. 156 00:13:00,550 --> 00:13:01,120 Jason. 157 00:13:01,720 --> 00:13:02,530 Great. 158 00:13:02,530 --> 00:13:06,430 So now we had back the actual data. 159 00:13:06,430 --> 00:13:15,070 So if you consume that log the data, you are going to see the details about my location or your location. 160 00:13:15,370 --> 00:13:19,810 So we are going to call this function inside this function to get the coordinates. 161 00:13:19,810 --> 00:13:22,720 Remember, we have the latitude and longitude. 162 00:13:22,840 --> 00:13:31,540 So down here I will go ahead and then call the geo location and I'll pass in the latitude and then the 163 00:13:31,540 --> 00:13:32,620 longitude. 164 00:13:33,730 --> 00:13:34,450 Great. 165 00:13:34,450 --> 00:13:35,920 So let's save it. 166 00:13:35,920 --> 00:13:43,960 And now let's check our browser and let's pop in our console and let's see as soon as I click on Get 167 00:13:43,960 --> 00:13:53,320 My Location, well, it says that LAX is not defined on line number 18, meaning this one. 168 00:13:53,410 --> 00:13:53,990 Oh, sorry. 169 00:13:54,040 --> 00:13:56,470 Supposed to be inside the eve. 170 00:13:56,470 --> 00:13:58,480 Sorry, guys, after the map. 171 00:13:58,780 --> 00:14:06,640 So before we save it, let's also console.log the arrow down here in case we encounter some error. 172 00:14:08,590 --> 00:14:09,430 Let's save it. 173 00:14:09,430 --> 00:14:11,200 And now let's check it out. 174 00:14:13,360 --> 00:14:15,250 Let's refresh our page. 175 00:14:15,310 --> 00:14:18,040 And now let's click on Get My Location. 176 00:14:18,810 --> 00:14:22,290 Let's look at a map and I got something wrong here. 177 00:14:22,320 --> 00:14:29,100 Response dot Casey is not a function, so it might be here. 178 00:14:29,490 --> 00:14:30,210 Where? 179 00:14:30,210 --> 00:14:30,840 Oh, sorry. 180 00:14:30,840 --> 00:14:32,470 We need to await that. 181 00:14:32,490 --> 00:14:33,720 Sorry, guys. 182 00:14:33,750 --> 00:14:35,880 A back on my side. 183 00:14:36,090 --> 00:14:40,710 So now let's click on get my location and let's wait for a while. 184 00:14:40,710 --> 00:14:43,530 And we have our data back. 185 00:14:43,530 --> 00:14:49,980 And this data is about my current location, how awesome it is. 186 00:14:50,160 --> 00:14:52,440 But these are in an array. 187 00:14:52,440 --> 00:14:58,740 So we can take the first index and then we can use these properties and that is it, guys. 188 00:14:59,130 --> 00:15:07,350 So the last step is that now we have the data here, so we are going to take the control container and 189 00:15:07,350 --> 00:15:10,980 next is we inject the values coming from this one. 190 00:15:10,980 --> 00:15:15,360 So let's get back to the HTML and this is a container. 191 00:15:15,390 --> 00:15:19,530 So we are going to select everything inside the container. 192 00:15:19,530 --> 00:15:26,400 So from here down here and now I'll select that and now back here. 193 00:15:26,670 --> 00:15:34,020 So as we did for the tasks manager application and the battery application is going to be the same method 194 00:15:34,020 --> 00:15:34,490 here. 195 00:15:34,500 --> 00:15:36,720 So here we go. 196 00:15:37,140 --> 00:15:40,860 So inside here, let's get the actual data. 197 00:15:40,860 --> 00:15:46,590 So the cons are called this one as country and I want the first index. 198 00:15:46,590 --> 00:15:48,180 Remember it's an array. 199 00:15:48,810 --> 00:15:49,230 Great. 200 00:15:49,230 --> 00:15:58,230 So for this one, I'm going to take the country container that is not a HTML when I use the back take 201 00:15:58,230 --> 00:16:01,650 and then our paste the HTML and that is it. 202 00:16:01,650 --> 00:16:04,560 Remember, this is what I'm trying to use. 203 00:16:04,770 --> 00:16:05,460 Great. 204 00:16:05,670 --> 00:16:09,030 So here, let's fill up with a dynamic data here. 205 00:16:09,030 --> 00:16:16,140 So for continents we are going to use the dollar sign carrier basis and then country the continent. 206 00:16:18,840 --> 00:16:23,100 And then and raging let's copy this one. 207 00:16:23,100 --> 00:16:32,760 And then under Reagan instead of P let's replace that and make use of Reagan and we have the straight 208 00:16:32,760 --> 00:16:34,770 inside the pea to list. 209 00:16:35,420 --> 00:16:38,600 Let's change this one to st. 210 00:16:39,290 --> 00:16:41,890 The last one going to be the address and address. 211 00:16:41,900 --> 00:16:45,230 We have it as label inside the console. 212 00:16:45,260 --> 00:16:46,050 You saw it? 213 00:16:46,070 --> 00:16:46,700 Yes. 214 00:16:47,060 --> 00:16:49,730 You can see that we have the default values here. 215 00:16:49,730 --> 00:16:53,540 So let's go ahead and then remove that or we can comment that one. 216 00:16:53,540 --> 00:16:56,330 And now we have it as an empty. 217 00:16:56,390 --> 00:16:59,090 If I click on Get my location. 218 00:16:59,120 --> 00:17:01,400 Let's have a look, guys. 219 00:17:01,730 --> 00:17:06,920 Hey, the map has come and let's wait for the country. 220 00:17:06,950 --> 00:17:10,819 Details also where I think we got something wrong. 221 00:17:10,819 --> 00:17:16,460 So let's check our console and it says that cannot read a property or continent. 222 00:17:16,460 --> 00:17:19,940 So this means that we are not having the actual data here. 223 00:17:20,359 --> 00:17:26,630 So let's try to console.log the data and let's look at the format how we can get that one. 224 00:17:26,630 --> 00:17:34,880 So let's have a look and let's click on the Get My Location and I'm waiting for the response and here 225 00:17:34,880 --> 00:17:35,540 we go. 226 00:17:35,750 --> 00:17:41,300 It is inside the data and then the array. 227 00:17:41,330 --> 00:17:43,880 So going to be dot data. 228 00:17:44,990 --> 00:17:46,340 Yes, like this one. 229 00:17:46,340 --> 00:17:52,070 So now let's save it and now let's make a request again and let's wait. 230 00:17:52,340 --> 00:17:59,210 And you can see that we go back the Asian hide, everything is working, but we have some strange diff 231 00:17:59,210 --> 00:18:05,180 here where I think we need to remove all so we need to have this one. 232 00:18:05,180 --> 00:18:05,780 Yeah. 233 00:18:06,830 --> 00:18:07,250 Great. 234 00:18:07,250 --> 00:18:13,430 So now again, let's hit send and I have the details as compared to the final one. 235 00:18:13,430 --> 00:18:16,040 You can see everything remains the same. 236 00:18:16,520 --> 00:18:25,670 So guys here and this section under making use of web APIs, it's time for you to explore more at every 237 00:18:25,670 --> 00:18:26,360 time. 238 00:18:26,720 --> 00:18:28,790 So I want to give you a challenge. 239 00:18:28,820 --> 00:18:35,810 Looking at this API, we can make a request to find details about a particular country, meaning that 240 00:18:35,810 --> 00:18:41,810 if you enter, let's say, USA or Ghana, we're going to have more details about the country, including 241 00:18:41,810 --> 00:18:46,340 the flag, the currency, the language, the history of that country. 242 00:18:46,400 --> 00:18:51,770 It's your time to explore more how to make use of what HTTP requests.