WEBVTT 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.