1 00:00:01,050 --> 00:00:03,330 ‫With our context now in place, 2 00:00:03,330 --> 00:00:05,040 ‫let's take a detour 3 00:00:05,040 --> 00:00:09,090 ‫and implement a map in the next few lecturers. 4 00:00:09,090 --> 00:00:12,720 ‫So many kinds of applications require a map 5 00:00:12,720 --> 00:00:16,803 ‫and so this is a really nice feature to implement here. 6 00:00:18,390 --> 00:00:21,000 ‫And we are going to implement this map 7 00:00:21,000 --> 00:00:23,523 ‫with the help of a third party package. 8 00:00:24,540 --> 00:00:28,263 ‫So let's open up a new terminal here. 9 00:00:30,090 --> 00:00:32,580 ‫So again, in our project folder 10 00:00:32,580 --> 00:00:37,240 ‫and then let's NPM install React Leaflet. 11 00:00:39,390 --> 00:00:43,770 ‫And then we also need to install basically the base library, 12 00:00:43,770 --> 00:00:44,943 ‫which is Leaflet. 13 00:00:46,560 --> 00:00:50,670 ‫So React Leaflet is like built on top of Leaflet 14 00:00:50,670 --> 00:00:53,550 ‫and so we need both of them installed. 15 00:00:53,550 --> 00:00:57,630 ‫So this is basically the biggest open source library 16 00:00:57,630 --> 00:00:59,430 ‫to implement maps. 17 00:00:59,430 --> 00:01:02,190 ‫And if you took my complete JavaScript course, 18 00:01:02,190 --> 00:01:05,310 ‫then we already used the same library there, 19 00:01:05,310 --> 00:01:08,610 ‫even though we didn't use it from NPM, 20 00:01:08,610 --> 00:01:10,743 ‫but just installed it in a different way. 21 00:01:11,640 --> 00:01:16,620 ‫But anyway, now we are ready to actually use this library. 22 00:01:16,620 --> 00:01:20,520 ‫So let's close all we don't need here anymore. 23 00:01:20,520 --> 00:01:23,343 ‫And let's open up the map component. 24 00:01:24,360 --> 00:01:28,560 ‫So right here, we already have this JSX 25 00:01:28,560 --> 00:01:32,550 ‫but we will actually get rid of all of this, 26 00:01:32,550 --> 00:01:34,473 ‫most of it at least. 27 00:01:35,430 --> 00:01:39,690 ‫Now, whenever we bring in a third party library like this, 28 00:01:39,690 --> 00:01:43,290 ‫it's a good idea to check out the documentation. 29 00:01:43,290 --> 00:01:48,290 ‫And so let's just quickly search for React Leaflet. 30 00:01:48,930 --> 00:01:53,280 ‫And so then here we get our documentation page 31 00:01:53,280 --> 00:01:55,770 ‫and here is some sample code that we're actually 32 00:01:55,770 --> 00:01:58,950 ‫going to copy and paste in a minute here. 33 00:01:58,950 --> 00:02:02,850 ‫But for now, let's go to the getting started tab. 34 00:02:02,850 --> 00:02:06,930 ‫And so yeah, here I'm actually interested 35 00:02:06,930 --> 00:02:09,720 ‫in the installation part just to show you what 36 00:02:09,720 --> 00:02:13,050 ‫we already did, which was to install Leaflet 37 00:02:13,050 --> 00:02:18,050 ‫and React Leaflet and yeah here is the part 38 00:02:21,840 --> 00:02:24,360 ‫that I was looking for because it says so 39 00:02:24,360 --> 00:02:29,070 ‫that we also must set up our project using the base library. 40 00:02:29,070 --> 00:02:31,200 ‫So basically this quick start document 41 00:02:31,200 --> 00:02:34,410 ‫of the Leaflet base library. 42 00:02:34,410 --> 00:02:37,350 ‫So again, the one that we're using is just built 43 00:02:37,350 --> 00:02:38,973 ‫on top of this one. 44 00:02:40,410 --> 00:02:41,700 ‫So what matters here is 45 00:02:41,700 --> 00:02:46,350 ‫that we install or that we include this CSS here. 46 00:02:46,350 --> 00:02:48,870 ‫Now I actually already did that. 47 00:02:48,870 --> 00:02:53,040 ‫So if we check out the index dot CSS file, 48 00:02:53,040 --> 00:02:57,480 ‫then notice how up here we import already 49 00:02:57,480 --> 00:02:59,970 ‫basically exactly this URL. 50 00:02:59,970 --> 00:03:02,850 ‫Now here the version number is a bit different 51 00:03:02,850 --> 00:03:04,530 ‫and we can change that 52 00:03:04,530 --> 00:03:07,560 ‫but we can also just leave it probably 53 00:03:07,560 --> 00:03:10,050 ‫because it's not going to make any difference. 54 00:03:10,050 --> 00:03:12,720 ‫But I wanted to show you this, 'cause in the future 55 00:03:12,720 --> 00:03:15,300 ‫if you want to use this library yourself 56 00:03:15,300 --> 00:03:17,670 ‫then you also need to do this part. 57 00:03:17,670 --> 00:03:21,630 ‫So also installing CSS. 58 00:03:21,630 --> 00:03:26,250 ‫And now let's actually take this sample code here 59 00:03:26,250 --> 00:03:28,803 ‫and bring it into our own application. 60 00:03:31,380 --> 00:03:36,120 ‫So place that right here into this div. 61 00:03:36,120 --> 00:03:39,300 ‫And so you see that basically what Leaflet React 62 00:03:39,300 --> 00:03:42,960 ‫does is to give us all of these predefined components 63 00:03:42,960 --> 00:03:47,640 ‫that we can then use in order to display the map itself 64 00:03:47,640 --> 00:03:50,283 ‫or some markers and even popups. 65 00:03:51,150 --> 00:03:53,040 ‫So let's now include all 66 00:03:53,040 --> 00:03:56,523 ‫of these libraries here or all of these components. 67 00:03:59,850 --> 00:04:01,800 ‫So map container 68 00:04:01,800 --> 00:04:05,520 ‫and then there we have our auto complete. 69 00:04:05,520 --> 00:04:10,293 ‫We need also the tile layer. 70 00:04:12,900 --> 00:04:16,053 ‫We also have the marker and the popup. 71 00:04:17,340 --> 00:04:21,093 ‫So marker and popup. 72 00:04:22,290 --> 00:04:26,820 ‫Okay, and now the only problem that we have is the position. 73 00:04:26,820 --> 00:04:28,740 ‫So we need to give this map container 74 00:04:28,740 --> 00:04:31,590 ‫which is a component that is actually responsible 75 00:04:31,590 --> 00:04:35,373 ‫for rendering the map itself, some starting position. 76 00:04:36,540 --> 00:04:38,733 ‫So let's create that here. 77 00:04:40,350 --> 00:04:44,733 ‫So const, and I'm gonna call it map position. 78 00:04:46,290 --> 00:04:48,300 ‫And actually this should be state 79 00:04:48,300 --> 00:04:51,480 ‫because later on when this map position changes 80 00:04:51,480 --> 00:04:54,123 ‫we want the map then to re-render. 81 00:04:55,050 --> 00:04:59,040 ‫So let's use a piece of state here. 82 00:04:59,040 --> 00:05:02,610 ‫And as a starting position, I will create an array. 83 00:05:02,610 --> 00:05:04,740 ‫And then let's say the latitude, 84 00:05:04,740 --> 00:05:07,380 ‫which is the first value is 40 85 00:05:07,380 --> 00:05:10,503 ‫and then the longitude, let's say zero. 86 00:05:11,520 --> 00:05:14,700 ‫So the map container here, the center prop, 87 00:05:14,700 --> 00:05:18,240 ‫expects an array of latitude and longitude. 88 00:05:18,240 --> 00:05:21,423 ‫And so that's why I'm defining the position here like that. 89 00:05:22,410 --> 00:05:25,770 ‫And then here, of course, we need to destructure that 90 00:05:25,770 --> 00:05:30,693 ‫into map position and set map position. 91 00:05:32,160 --> 00:05:37,160 ‫And so then here, let's replace this one. 92 00:05:37,500 --> 00:05:40,683 ‫And also here temporarily this marker. 93 00:05:43,320 --> 00:05:44,643 ‫So let's give it a save. 94 00:05:45,660 --> 00:05:50,660 ‫And let's see, and well, that didn't really go as expected. 95 00:05:50,970 --> 00:05:53,610 ‫Let's try to manually reload here, 96 00:05:53,610 --> 00:05:56,970 ‫but well there's no map to be seen. 97 00:05:56,970 --> 00:06:01,293 ‫So let's maybe quit our application here and restart. 98 00:06:04,410 --> 00:06:08,430 ‫So maybe we need that in order to get that package in, 99 00:06:08,430 --> 00:06:10,320 ‫but apparently not. 100 00:06:10,320 --> 00:06:12,390 ‫So still no map. 101 00:06:12,390 --> 00:06:15,093 ‫So let's try to inspect here. 102 00:06:15,930 --> 00:06:19,113 ‫So to see if anything was actually loaded. 103 00:06:21,300 --> 00:06:23,343 ‫So here's that map container. 104 00:06:24,810 --> 00:06:27,990 ‫And indeed there is something there. 105 00:06:27,990 --> 00:06:29,280 ‫So something new 106 00:06:29,280 --> 00:06:32,850 ‫that we definitely didn't put there ourselves. 107 00:06:32,850 --> 00:06:36,720 ‫So it is working, but as we can see up here, 108 00:06:36,720 --> 00:06:40,710 ‫so there the height of the element is actually zero. 109 00:06:40,710 --> 00:06:43,770 ‫And so that's why we cannot see the map. 110 00:06:43,770 --> 00:06:47,460 ‫And so the reason for that is that here I actually 111 00:06:47,460 --> 00:06:51,930 ‫forgot to include a class that they have already created. 112 00:06:51,930 --> 00:06:54,900 ‫So here in this CSS module. 113 00:06:54,900 --> 00:06:58,110 ‫So notice how here we have this map container, 114 00:06:58,110 --> 00:07:01,530 ‫which we are already using, and we also have this map. 115 00:07:01,530 --> 00:07:06,090 ‫And so this one, all it does is to set the height to 100%. 116 00:07:06,090 --> 00:07:09,480 ‫And so on this one here, we already have the class, 117 00:07:09,480 --> 00:07:11,823 ‫but now I also need to add it right here. 118 00:07:13,200 --> 00:07:18,200 ‫So class name is styles dot map. 119 00:07:18,720 --> 00:07:21,813 ‫And here, let's actually remove this event handler. 120 00:07:23,820 --> 00:07:28,500 ‫And well, there's still no map, but ah, here it is. 121 00:07:28,500 --> 00:07:32,610 ‫Nice, so that works beautifully. 122 00:07:32,610 --> 00:07:36,360 ‫So we can zoom out and move to different places. 123 00:07:36,360 --> 00:07:41,360 ‫As you see, it then takes a bit of time to load these tiles. 124 00:07:41,760 --> 00:07:43,500 ‫And speaking of the tiles 125 00:07:43,500 --> 00:07:46,620 ‫I actually want them to have a different style. 126 00:07:46,620 --> 00:07:50,370 ‫So notice how here the maps looks a little bit different 127 00:07:50,370 --> 00:07:53,880 ‫so I think it does look a lot nicer. 128 00:07:53,880 --> 00:07:56,640 ‫So a bit more in line with the colors of 129 00:07:56,640 --> 00:07:58,500 ‫the rest of the application. 130 00:07:58,500 --> 00:08:02,730 ‫And so for that we need to change the URL here of the tiles. 131 00:08:02,730 --> 00:08:06,390 ‫And one that I like is just very simple to change. 132 00:08:06,390 --> 00:08:11,390 ‫Just change this here to fr then slash hot and that's it. 133 00:08:14,520 --> 00:08:18,497 ‫So maybe we need to manually reload and there it is. 134 00:08:23,160 --> 00:08:26,583 ‫So these colors I think are a lot more organic. 135 00:08:27,660 --> 00:08:29,970 ‫Now what I also want to do here is 136 00:08:29,970 --> 00:08:33,540 ‫that I want to change the zoom when I scroll on my mouse. 137 00:08:33,540 --> 00:08:36,060 ‫So right now that doesn't happen. 138 00:08:36,060 --> 00:08:37,230 ‫So that doesn't work. 139 00:08:37,230 --> 00:08:38,487 ‫And that's because here 140 00:08:38,487 --> 00:08:42,450 ‫the scroll wheel zoom prop is set to false. 141 00:08:42,450 --> 00:08:46,260 ‫So let's just set that to true, come back here. 142 00:08:46,260 --> 00:08:48,780 ‫And for some reason we always need to reload, 143 00:08:48,780 --> 00:08:53,160 ‫but then then that works, nice. 144 00:08:53,160 --> 00:08:56,160 ‫Now for some reason we don't get a pop up there. 145 00:08:56,160 --> 00:08:58,320 ‫So let's load that once again. 146 00:08:58,320 --> 00:09:01,740 ‫And so yeah, you see that if we click here, 147 00:09:01,740 --> 00:09:03,360 ‫we actually get the text 148 00:09:03,360 --> 00:09:06,030 ‫that is right here inside the popup. 149 00:09:06,030 --> 00:09:08,160 ‫So this thing here is the marker 150 00:09:08,160 --> 00:09:11,790 ‫and what opens when we click is the popup. 151 00:09:11,790 --> 00:09:14,160 ‫So of course we don't want this one here 152 00:09:14,160 --> 00:09:15,570 ‫in the starting position, 153 00:09:15,570 --> 00:09:20,010 ‫but instead we will want one pop-up for each of our cities. 154 00:09:20,010 --> 00:09:22,653 ‫And so let's implement that in the next video.