1 00:00:01,510 --> 00:00:02,810 So in this video, 2 00:00:02,810 --> 00:00:04,480 we gonna learn how to display 3 00:00:04,480 --> 00:00:08,973 a map using a third party library called Leaflet. 4 00:00:10,810 --> 00:00:15,770 So to start let's quickly Google Leaflet 5 00:00:15,770 --> 00:00:18,410 and probably the first result will already 6 00:00:18,410 --> 00:00:20,403 be for this library. 7 00:00:21,400 --> 00:00:22,990 So you'll see that Leaflet 8 00:00:22,990 --> 00:00:25,450 is an open source JavaScript library 9 00:00:25,450 --> 00:00:28,690 for mobile-friendly interactive maps. 10 00:00:28,690 --> 00:00:31,030 So essentially this is a library 11 00:00:31,030 --> 00:00:33,120 that some other developers wrote 12 00:00:33,120 --> 00:00:34,330 and that we can now include 13 00:00:34,330 --> 00:00:37,580 for free our own code and use it. 14 00:00:37,580 --> 00:00:38,413 And in this case, 15 00:00:38,413 --> 00:00:40,680 we can use it to display in maps 16 00:00:41,520 --> 00:00:44,470 and whenever we use a third-party library, 17 00:00:44,470 --> 00:00:48,330 the first thing to do is to basically include it 18 00:00:48,330 --> 00:00:49,730 in our site. 19 00:00:49,730 --> 00:00:53,850 And so let's come here to the Downloads Page. 20 00:00:53,850 --> 00:00:56,180 And so here we can download Leaflet 21 00:00:56,180 --> 00:00:58,720 to our computer if we wanted 22 00:00:58,720 --> 00:01:02,500 or we can also use a hosted version of Leaflet. 23 00:01:02,500 --> 00:01:04,730 And this basically means that we can use 24 00:01:04,730 --> 00:01:08,080 a version of this library that is already hosted 25 00:01:08,080 --> 00:01:09,750 by someone else. 26 00:01:09,750 --> 00:01:10,583 So in this case, 27 00:01:10,583 --> 00:01:14,810 it is a CDN which is a Content Delivery Network. 28 00:01:14,810 --> 00:01:17,113 And so it has this URL here. 29 00:01:18,320 --> 00:01:21,150 So that stands for unpackaged.com. 30 00:01:21,150 --> 00:01:23,443 And then here we have the Leaflet Library. 31 00:01:25,110 --> 00:01:28,140 So actually we will need a CSS file 32 00:01:28,140 --> 00:01:30,383 and we will also need a JavaScript file. 33 00:01:31,360 --> 00:01:34,490 Now, there are also a bit more elegant ways 34 00:01:34,490 --> 00:01:36,680 of including JavaScript, 35 00:01:36,680 --> 00:01:41,210 for example using a package manager like NPM. 36 00:01:41,210 --> 00:01:42,600 And then all we would have to do 37 00:01:42,600 --> 00:01:46,950 is NPM install Leaflet into our application. 38 00:01:46,950 --> 00:01:50,700 And actually this is how we will do it in the future. 39 00:01:50,700 --> 00:01:52,620 So in one of the next sections, 40 00:01:52,620 --> 00:01:54,990 we will actually learn how to do this 41 00:01:54,990 --> 00:01:57,990 using the NPM package manager, 42 00:01:57,990 --> 00:02:00,890 but for now probably the easiest way 43 00:02:00,890 --> 00:02:03,130 to get started is to simply include 44 00:02:03,130 --> 00:02:06,660 a hosted version that is on a CDN. 45 00:02:06,660 --> 00:02:08,930 And so let's grab this code here 46 00:02:08,930 --> 00:02:11,573 and paste it in our HTMLs' hat. 47 00:02:13,520 --> 00:02:17,800 So right here and to before our own script 48 00:02:17,800 --> 00:02:19,100 and that's very important. 49 00:02:20,660 --> 00:02:24,960 All right, so this here is our script 50 00:02:24,960 --> 00:02:27,130 and of course it is in our script 51 00:02:27,130 --> 00:02:29,703 where we will then use the Leaflet Library. 52 00:02:30,600 --> 00:02:33,320 And so by the time that our script loads, 53 00:02:33,320 --> 00:02:35,670 the browser must already have downloaded 54 00:02:35,670 --> 00:02:38,720 the Leaflet Library because otherwise 55 00:02:38,720 --> 00:02:42,487 our code will not be able to work without library. 56 00:02:42,487 --> 00:02:45,280 And that makes sense, right? 57 00:02:45,280 --> 00:02:48,110 Now here we also want to specify actually 58 00:02:48,110 --> 00:02:50,540 the Differ Attribute. 59 00:02:50,540 --> 00:02:52,120 So as we learned previously, 60 00:02:52,120 --> 00:02:54,160 we should never put any JavaScript 61 00:02:54,160 --> 00:02:58,760 in the header without any of the Differ or Async Attributes. 62 00:02:58,760 --> 00:03:00,519 And since the order matters here, 63 00:03:00,519 --> 00:03:05,519 remember, we must then use the Differ Attribute. 64 00:03:05,890 --> 00:03:08,320 And so this is actually a perfect example 65 00:03:08,320 --> 00:03:11,920 for when we need to use Differ because again 66 00:03:11,920 --> 00:03:14,830 here the order in which the scripts are downloaded 67 00:03:14,830 --> 00:03:16,493 is actually very important. 68 00:03:17,340 --> 00:03:20,100 Okay, so give it a safe here 69 00:03:20,100 --> 00:03:23,233 and then let's go back to the Leaflet site. 70 00:03:24,860 --> 00:03:28,120 So we already included the Library into our site, 71 00:03:28,120 --> 00:03:30,910 but of course we need to do something with it. 72 00:03:30,910 --> 00:03:35,860 So on its own this Leaflet script here doesn't do anything. 73 00:03:35,860 --> 00:03:37,880 So we now need to use basically 74 00:03:37,880 --> 00:03:39,580 the functions that are defined 75 00:03:39,580 --> 00:03:42,710 in this Library to our advantage 76 00:03:42,710 --> 00:03:47,710 and so to actually use the Library on our own page. 77 00:03:49,240 --> 00:03:50,440 And so down here, 78 00:03:50,440 --> 00:03:52,450 there is a very simple example 79 00:03:52,450 --> 00:03:54,520 of how we could implement a map 80 00:03:54,520 --> 00:03:56,410 with a certain coordinates here. 81 00:03:56,410 --> 00:03:58,560 So these coordinates and then also how 82 00:03:58,560 --> 00:04:02,223 to display a very simple marker like this one. 83 00:04:03,270 --> 00:04:08,200 So again let's just go to this overview page here. 84 00:04:08,200 --> 00:04:10,490 So basically the very first page 85 00:04:10,490 --> 00:04:14,683 and then just copy this very simple code that we have here. 86 00:04:16,160 --> 00:04:19,130 So copy it and then this is what 87 00:04:19,130 --> 00:04:21,260 I actually want to happen 88 00:04:21,260 --> 00:04:24,283 when the browser is successful getting the coordinates. 89 00:04:25,250 --> 00:04:27,260 So let's paste this here, 90 00:04:27,260 --> 00:04:29,180 give it a safe and now of course, 91 00:04:29,180 --> 00:04:32,373 we need to adapt this here to our current situation. 92 00:04:33,810 --> 00:04:36,920 First that's made as a const and not a var 93 00:04:37,850 --> 00:04:39,150 then whatever string 94 00:04:39,150 --> 00:04:41,710 that we pass here into this map function 95 00:04:43,060 --> 00:04:47,280 must be the ID name of an element in our HTML. 96 00:04:47,280 --> 00:04:49,610 And it is in that element where the map 97 00:04:49,610 --> 00:04:51,240 will be displayed. 98 00:04:51,240 --> 00:04:53,740 And so what that means is that in our HTML 99 00:04:53,740 --> 00:04:56,680 we need an element with the ID of map 100 00:04:57,730 --> 00:04:59,563 and that should already be here. 101 00:05:03,910 --> 00:05:06,110 So that is down here. 102 00:05:06,110 --> 00:05:10,410 So here I have this empty div and it has the ID of map. 103 00:05:10,410 --> 00:05:13,170 And so that's exactly this here 104 00:05:13,170 --> 00:05:15,060 so I could change it here 105 00:05:15,060 --> 00:05:16,640 and then of course I would also have 106 00:05:16,640 --> 00:05:18,383 to change it in the HTML. 107 00:05:19,310 --> 00:05:21,930 Now this L here this is basically 108 00:05:21,930 --> 00:05:26,290 the main function that Leaflet gives us as an entry point. 109 00:05:26,290 --> 00:05:27,307 So basically this is kind of 110 00:05:27,307 --> 00:05:31,450 the namespace a little bit like for example, 111 00:05:31,450 --> 00:05:36,450 this Intel namespace for the Internationalization API. 112 00:05:36,910 --> 00:05:39,730 So we talked about namespaces before 113 00:05:39,730 --> 00:05:44,600 and so Leaflet basically gives us this L namespace here 114 00:05:44,600 --> 00:05:46,320 and then that L has a couple 115 00:05:46,320 --> 00:05:48,270 of methods that we can use. 116 00:05:48,270 --> 00:05:50,920 And one of them is this map method. 117 00:05:50,920 --> 00:05:53,200 Another one is this tile layer 118 00:05:53,200 --> 00:05:56,320 where we actually need to define the tiles of our map 119 00:05:56,320 --> 00:06:00,460 and then we can also display markers like this. 120 00:06:00,460 --> 00:06:04,620 So this should probably already render a map on our page. 121 00:06:04,620 --> 00:06:06,990 It will do that on these coordinates 122 00:06:06,990 --> 00:06:09,410 but for now that's okay for us. 123 00:06:09,410 --> 00:06:11,823 So let's just see if this actually worked, 124 00:06:14,690 --> 00:06:16,313 now let's try to reload here, 125 00:06:17,760 --> 00:06:18,710 but for some reason, 126 00:06:18,710 --> 00:06:20,270 nothing is happening. 127 00:06:20,270 --> 00:06:22,350 So let's check if you're in the console, 128 00:06:22,350 --> 00:06:25,340 we actually have access to that L variable 129 00:06:26,270 --> 00:06:27,853 and just see that we do. 130 00:06:28,870 --> 00:06:31,240 So this L here is of course the L 131 00:06:31,240 --> 00:06:33,980 that we use previously in our code as well. 132 00:06:33,980 --> 00:06:37,150 So it's this L here and it is available here 133 00:06:37,150 --> 00:06:40,800 in this script and also here in the browser console 134 00:06:40,800 --> 00:06:43,940 because it is essentially a global variable 135 00:06:43,940 --> 00:06:48,237 inside of the script of Leaflet, right? 136 00:06:49,870 --> 00:06:51,060 So here in this script 137 00:06:51,060 --> 00:06:54,530 that we include here leaflets.js, 138 00:06:54,530 --> 00:06:56,870 the L variable is a global variable 139 00:06:56,870 --> 00:07:00,040 that we then can access from all the other scripts. 140 00:07:00,040 --> 00:07:02,200 And I think that this is something 141 00:07:02,200 --> 00:07:04,320 that we never saw happening before, 142 00:07:04,320 --> 00:07:07,540 because we never worked with multiple scripts. 143 00:07:07,540 --> 00:07:10,300 So let me show it a little bit better to you 144 00:07:10,300 --> 00:07:12,600 and include another script here. 145 00:07:12,600 --> 00:07:16,113 Let's call it just other.js. 146 00:07:16,960 --> 00:07:21,280 So I'm creating it here, other.js 147 00:07:22,810 --> 00:07:25,793 and now let's define first name here, 148 00:07:27,010 --> 00:07:32,010 set it to Jonas and then here in these gripped.js, 149 00:07:32,610 --> 00:07:35,203 I should be able to access that variable. 150 00:07:38,140 --> 00:07:41,503 So let's see and here it is. 151 00:07:42,430 --> 00:07:44,830 And so the reason for that is that 152 00:07:44,830 --> 00:07:47,673 this first name variable is a global variable here 153 00:07:47,673 --> 00:07:49,380 in this script. 154 00:07:49,380 --> 00:07:50,220 And so again, 155 00:07:50,220 --> 00:07:53,220 any variable that is global in any script 156 00:07:53,220 --> 00:07:55,920 will be available to all the other scripts 157 00:07:55,920 --> 00:07:59,200 while as long as they appear after that script 158 00:08:00,400 --> 00:08:02,990 here included in the HTML. 159 00:08:02,990 --> 00:08:07,240 So script.js has access to all the global variables 160 00:08:07,240 --> 00:08:12,240 in othe.js when other.js and leaflet.js 161 00:08:13,730 --> 00:08:16,794 but for example, other.js does not have access 162 00:08:16,794 --> 00:08:19,800 to anything from script.js 163 00:08:19,800 --> 00:08:23,460 because it appears afterwards, all right? 164 00:08:23,460 --> 00:08:27,890 So in other, let's see any variable here. 165 00:08:27,890 --> 00:08:29,233 So for example the month, 166 00:08:30,190 --> 00:08:32,733 so here we will not have access to month. 167 00:08:36,570 --> 00:08:39,410 All right, so month is not defined. 168 00:08:39,410 --> 00:08:41,690 And so the reason for that again, 169 00:08:41,690 --> 00:08:44,720 is that by the time that this script here is executed, 170 00:08:44,720 --> 00:08:49,510 this other.js, script.js has not yet been loaded. 171 00:08:49,510 --> 00:08:51,947 And so therefore it doesn't find 172 00:08:51,947 --> 00:08:56,033 this month variable anywhere in global scope. 173 00:08:56,940 --> 00:08:59,750 All right but this was just an example. 174 00:08:59,750 --> 00:09:01,243 Let's get rid of this. 175 00:09:02,250 --> 00:09:06,080 Well, not get rid, let's just comment it out here maybe. 176 00:09:06,080 --> 00:09:09,210 And anyway, maybe you noticed that already 177 00:09:09,210 --> 00:09:11,950 the map here has appeared this time. 178 00:09:11,950 --> 00:09:16,010 And so what that means is that our code is working. 179 00:09:16,010 --> 00:09:18,400 Now, this one here is simply appearing in London 180 00:09:18,400 --> 00:09:23,400 and that is because we still have the default code, 181 00:09:23,720 --> 00:09:25,700 but now you can probably see that 182 00:09:25,700 --> 00:09:30,000 what we want to do here is to use our own latitude 183 00:09:30,000 --> 00:09:32,493 and longitude here, right? 184 00:09:34,320 --> 00:09:39,320 So let's create an array called coards like this 185 00:09:40,740 --> 00:09:42,720 and it will contain first the latidude 186 00:09:43,790 --> 00:09:46,460 so that's the standard first latitude 187 00:09:46,460 --> 00:09:49,260 and then the longitude. 188 00:09:49,260 --> 00:09:51,450 And now let's use that array here, 189 00:09:51,450 --> 00:09:55,260 because as you see this set view method expects 190 00:09:55,260 --> 00:09:56,693 this array of coordinates, 191 00:09:57,810 --> 00:10:01,450 then it also expects this second parameter, 192 00:10:01,450 --> 00:10:04,000 but let's talk about that one later. 193 00:10:04,000 --> 00:10:06,860 So here it's coards and then let's also use 194 00:10:06,860 --> 00:10:10,103 the same coordinates here for the marker. 195 00:10:14,040 --> 00:10:16,080 All right. Let's check again 196 00:10:19,540 --> 00:10:22,063 and all right, that works. 197 00:10:23,730 --> 00:10:25,970 Now here we just have this error 198 00:10:25,970 --> 00:10:27,960 from the first variable that we created 199 00:10:28,810 --> 00:10:31,890 in the other script but what matters here 200 00:10:31,890 --> 00:10:34,513 is that now we have this beautiful map here, 201 00:10:35,630 --> 00:10:39,393 right at my, well approximate location right now. 202 00:10:41,520 --> 00:10:44,580 Now that other number that we saw in the function 203 00:10:44,580 --> 00:10:47,130 is basically the zoom level of the map. 204 00:10:47,130 --> 00:10:50,680 So we can zoom in and zoom out here on this. 205 00:10:50,680 --> 00:10:55,680 And so now let's try it with some other values here, 206 00:10:56,100 --> 00:10:57,120 for example 10 207 00:10:59,870 --> 00:11:02,963 then you'll see that it's a lot more zoomed out, 208 00:11:05,010 --> 00:11:07,330 but let's say we use 17. 209 00:11:07,330 --> 00:11:10,030 Then that's probably going to be pretty close, 210 00:11:10,030 --> 00:11:13,223 that's probably as close as it gets. 211 00:11:14,060 --> 00:11:18,053 And actually 13 is a pretty a reasonable number. 212 00:11:19,020 --> 00:11:21,170 So let's keep it at 13. 213 00:11:21,170 --> 00:11:24,520 And now let's talk about this tile layer here. 214 00:11:24,520 --> 00:11:26,620 So the map that we see on the page 215 00:11:26,620 --> 00:11:29,680 is basically made up of small tiles 216 00:11:29,680 --> 00:11:33,080 and these tiles they come from this URL here, 217 00:11:33,080 --> 00:11:35,573 which basically is from open street map. 218 00:11:36,470 --> 00:11:39,460 And maybe you have heard of open street map 219 00:11:39,460 --> 00:11:42,200 and it's basically an open source map 220 00:11:42,200 --> 00:11:44,650 that everyone can use for free. 221 00:11:44,650 --> 00:11:46,790 And so open street map is actually 222 00:11:46,790 --> 00:11:48,520 the one that we gonna use, 223 00:11:48,520 --> 00:11:52,620 but Leaflet works with all other kinds of maps as well, 224 00:11:52,620 --> 00:11:54,350 for example with Google maps 225 00:11:54,350 --> 00:11:56,103 if that's the one that you prefer. 226 00:11:57,050 --> 00:12:00,600 Now, we can also use this URL here to change 227 00:12:00,600 --> 00:12:03,390 the appearance of our map. 228 00:12:03,390 --> 00:12:05,780 So what we see here right now 229 00:12:05,780 --> 00:12:08,830 or hopefully soon is basically 230 00:12:08,830 --> 00:12:12,730 the default map of open street maps. 231 00:12:12,730 --> 00:12:15,700 Now, however, when you Google around a little bit, 232 00:12:15,700 --> 00:12:17,550 you can find different styles. 233 00:12:17,550 --> 00:12:18,870 And so what I want to do now 234 00:12:18,870 --> 00:12:22,370 is to change this style to another one that I've found. 235 00:12:22,370 --> 00:12:23,960 And so to do that, 236 00:12:23,960 --> 00:12:27,050 you can simply change this one here to fr 237 00:12:28,160 --> 00:12:33,160 and then here it is /hot/ and that's actually it. 238 00:12:34,810 --> 00:12:38,690 So that's simply another theme of these tiles. 239 00:12:38,690 --> 00:12:40,450 And so if you give it a safe 240 00:12:40,450 --> 00:12:43,230 then now you see that it looks different 241 00:12:43,230 --> 00:12:47,060 and in my opinion that actually looks a lot better. 242 00:12:47,060 --> 00:12:48,020 So when you refresh, 243 00:12:48,020 --> 00:12:52,173 maybe you see that it builds up basically in this tiles. 244 00:12:53,080 --> 00:12:54,910 So did you see that? 245 00:12:54,910 --> 00:12:57,260 So basically these maps squares, 246 00:12:57,260 --> 00:12:58,990 they appear one by one. 247 00:12:58,990 --> 00:13:01,930 And so that's what I mean by tiles. 248 00:13:01,930 --> 00:13:05,343 So those are the tiles that the map is made out of. 249 00:13:06,740 --> 00:13:09,320 Just get rid of this error here 250 00:13:09,320 --> 00:13:11,600 and then I think that for now, 251 00:13:11,600 --> 00:13:13,340 this is actually enough. 252 00:13:13,340 --> 00:13:16,750 So we also have this marker down here. 253 00:13:16,750 --> 00:13:20,430 And so that's for this marker plus this pop-up, 254 00:13:20,430 --> 00:13:22,850 but let's talk about in the next lecture, 255 00:13:22,850 --> 00:13:25,330 how we can actually create our own ones 256 00:13:25,330 --> 00:13:28,580 and then also display a pop-up and a marker 257 00:13:28,580 --> 00:13:31,440 wherever we click on the map. 258 00:13:31,440 --> 00:13:32,500 So if I clicked here, 259 00:13:32,500 --> 00:13:35,340 then I wanted a popup here in the marker 260 00:13:36,610 --> 00:13:38,280 or if I clicked over here, 261 00:13:38,280 --> 00:13:40,810 then I wanted the marker to be here. 262 00:13:40,810 --> 00:13:43,660 And so that gonna require a little bit more work. 263 00:13:43,660 --> 00:13:46,033 And so let's leave that for the next video.