1 00:00:01,100 --> 00:00:03,220 ‫Next up, you're gonna learn how 2 00:00:03,220 --> 00:00:07,150 ‫to integrate a nice map that displays all the locations of 3 00:00:07,150 --> 00:00:11,373 ‫a certain tour into our website using Mapbox. 4 00:00:12,730 --> 00:00:14,150 ‫But before we do that, 5 00:00:14,150 --> 00:00:18,160 ‫we first need to fix a small Bug that I just found. 6 00:00:18,160 --> 00:00:20,840 ‫So right now we are in the park camper tour, 7 00:00:20,840 --> 00:00:23,477 ‫but you see that up here it actually says 8 00:00:23,477 --> 00:00:27,180 ‫"The Forest Hiker" okay? And so, 9 00:00:27,180 --> 00:00:28,991 ‫That's obviously wrong 10 00:00:28,991 --> 00:00:30,260 ‫and so, 11 00:00:30,260 --> 00:00:33,700 ‫that's because here in our get tour handler, 12 00:00:33,700 --> 00:00:36,900 ‫we are always passing in this title, 13 00:00:36,900 --> 00:00:38,530 ‫so "The Forest Hiker Tour". 14 00:00:38,530 --> 00:00:42,193 ‫Which of course, is not correct so let's fix that. 15 00:00:44,850 --> 00:00:47,780 ‫Okay, and so let's say here 16 00:00:47,780 --> 00:00:50,190 ‫tour.name 17 00:00:51,400 --> 00:00:52,283 ‫and then tour. 18 00:00:54,520 --> 00:00:56,283 ‫Let's make that uppercase actually. 19 00:00:57,150 --> 00:01:00,150 ‫And so, now we should see "The park camper" tour 20 00:01:02,620 --> 00:01:05,070 ‫and yeah here it is. 21 00:01:05,070 --> 00:01:07,740 ‫And now about that map that is going to be 22 00:01:07,740 --> 00:01:10,050 ‫displayed here in this empty area, 23 00:01:10,050 --> 00:01:13,580 ‫we are gonna use a very nice library called "Mapbox" 24 00:01:13,580 --> 00:01:17,060 ‫and that library actually runs in the front end. 25 00:01:17,060 --> 00:01:19,030 ‫And so, in this lecture we are actually going to 26 00:01:19,030 --> 00:01:21,070 ‫write a little bit of front end code, 27 00:01:21,070 --> 00:01:23,330 ‫and not so much about the back end. 28 00:01:23,330 --> 00:01:25,300 ‫But this is still very important because 29 00:01:25,300 --> 00:01:27,890 ‫now you are gonna learn how to write JavaScript for 30 00:01:27,890 --> 00:01:31,730 ‫the client side and then integrate that into our templates. 31 00:01:31,730 --> 00:01:32,710 ‫Okay? 32 00:01:32,710 --> 00:01:34,190 ‫So let's do that 33 00:01:35,030 --> 00:01:39,130 ‫and first off remember that all the data, 34 00:01:39,130 --> 00:01:42,140 ‫so all the assets that are available on the client, 35 00:01:42,140 --> 00:01:44,170 ‫are here in this public folder. 36 00:01:44,170 --> 00:01:47,830 ‫So for example, our CSS file, our images and 37 00:01:47,830 --> 00:01:51,050 ‫we also have a folder here for JavaScript. 38 00:01:51,050 --> 00:01:53,470 ‫And currently that's empty and so let's 39 00:01:53,470 --> 00:01:56,230 ‫now actually create a new file in here called 40 00:01:58,697 --> 00:02:00,190 ‫Mapbox.js 41 00:02:03,000 --> 00:02:06,525 ‫Okay? And so this basically is a JavaScript file that 42 00:02:06,525 --> 00:02:08,700 ‫we are going to integrate into our HTML and 43 00:02:08,700 --> 00:02:11,250 ‫which will then run on the client side. 44 00:02:11,250 --> 00:02:14,140 ‫All right? So just like regular JavaScript that 45 00:02:14,140 --> 00:02:17,340 ‫you've been writing all your life (Laughs) Right? 46 00:02:17,340 --> 00:02:20,760 ‫But for now, let's simply do some simple console.log here 47 00:02:20,760 --> 00:02:23,343 ‫before we actually connect it with our back end. 48 00:02:25,540 --> 00:02:30,540 ‫So let's just say console.log hello from the client side. 49 00:02:33,360 --> 00:02:34,333 ‫All right, 50 00:02:35,400 --> 00:02:39,160 ‫and now let's actually integrate it into our templates. 51 00:02:39,160 --> 00:02:41,290 ‫Now it might appear that the best place to 52 00:02:41,290 --> 00:02:45,600 ‫do this integration is here in our base template right? 53 00:02:45,600 --> 00:02:49,220 ‫But in fact, we only want to include the Mapbox script on 54 00:02:49,220 --> 00:02:51,230 ‫the tour page, right? 55 00:02:51,230 --> 00:02:53,610 ‫So, how could we do that? 56 00:02:53,610 --> 00:02:56,070 ‫And the solution for that is once more, 57 00:02:56,070 --> 00:02:59,040 ‫extending a block here in our base template, 58 00:02:59,040 --> 00:03:01,190 ‫so I'm going to create a new block here that 59 00:03:01,190 --> 00:03:05,850 ‫we are then gonna extend from the tour. Okay? 60 00:03:05,850 --> 00:03:08,523 ‫And actually this block will be right here, 61 00:03:10,670 --> 00:03:12,260 ‫and I'm calling it "head" and 62 00:03:12,260 --> 00:03:15,093 ‫all of this content will actually be in there. 63 00:03:16,020 --> 00:03:18,740 ‫Now you might be wondering why we are doing that, 64 00:03:18,740 --> 00:03:20,410 ‫because when we extend the block 65 00:03:20,410 --> 00:03:22,700 ‫then the content inside that disappears. 66 00:03:22,700 --> 00:03:26,350 ‫So that's what happened here, right? 67 00:03:26,350 --> 00:03:29,440 ‫But actually there is another way of extending blocks, 68 00:03:29,440 --> 00:03:32,350 ‫which will then simply add the new content at the end 69 00:03:32,350 --> 00:03:34,060 ‫or at the beginning of the block. 70 00:03:34,060 --> 00:03:37,190 ‫All right? So let's see how we can do that. 71 00:03:37,190 --> 00:03:41,170 ‫And so right at the beginning here of our tour template, 72 00:03:41,170 --> 00:03:42,073 ‫let's now say: 73 00:03:44,810 --> 00:03:46,120 ‫block head, 74 00:03:46,120 --> 00:03:50,900 ‫and actually we say block append head, all right? 75 00:03:50,900 --> 00:03:53,730 ‫And so, whatever we will write in this block here 76 00:03:53,730 --> 00:03:55,960 ‫will then be appended to the content that's 77 00:03:55,960 --> 00:03:58,010 ‫already in that block. 78 00:03:58,010 --> 00:04:00,510 ‫Okay? And we could also use "prepend" and 79 00:04:00,510 --> 00:04:04,500 ‫then it would be added at the beginning of the block, okay? 80 00:04:04,500 --> 00:04:07,690 ‫And so now, all we are gonna do here is to 81 00:04:07,690 --> 00:04:08,950 ‫add a new script. 82 00:04:08,950 --> 00:04:11,890 ‫So using a script tag and then specifying the 83 00:04:11,890 --> 00:04:14,410 ‫source attribute, and so that is 84 00:04:15,280 --> 00:04:20,043 ‫for now "js/mapbox.js" 85 00:04:22,890 --> 00:04:23,760 ‫okay? 86 00:04:23,760 --> 00:04:27,400 ‫So again, this template here already extends 87 00:04:27,400 --> 00:04:28,800 ‫our base template, 88 00:04:28,800 --> 00:04:32,070 ‫and so with this here, we can basically inject 89 00:04:32,070 --> 00:04:33,870 ‫this line of code, 90 00:04:33,870 --> 00:04:37,450 ‫into the head block that is already in our base template. 91 00:04:37,450 --> 00:04:40,930 ‫And so, we append that, and so it will then appear here 92 00:04:40,930 --> 00:04:44,380 ‫at the end of this head block, so right here. 93 00:04:44,380 --> 00:04:46,453 ‫And actually let's try that our now. 94 00:04:47,940 --> 00:04:49,053 ‫So when I reload, 95 00:04:50,520 --> 00:04:53,610 ‫we now should get that message in our console 96 00:04:53,610 --> 00:04:56,760 ‫and indeed, "Hello from the client side" 97 00:04:56,760 --> 00:04:57,593 ‫Great 98 00:04:58,700 --> 00:05:02,080 ‫So, next up we want to actually get access to 99 00:05:02,080 --> 00:05:03,850 ‫the location data of the tour that 100 00:05:03,850 --> 00:05:06,140 ‫we are currently trying to display, 101 00:05:06,140 --> 00:05:08,170 ‫right here in the JavaScript file. 102 00:05:08,170 --> 00:05:10,390 ‫So how are going to do that? 103 00:05:10,390 --> 00:05:13,590 ‫Well, then we can do an Ajax request, 104 00:05:13,590 --> 00:05:16,410 ‫so basically a call to our API and 105 00:05:16,410 --> 00:05:17,870 ‫get the data from there. 106 00:05:17,870 --> 00:05:20,760 ‫But that's not really necessary in this case. 107 00:05:20,760 --> 00:05:23,590 ‫And so, let me show you a real nice trick. 108 00:05:23,590 --> 00:05:25,750 ‫So here in our tour template, 109 00:05:25,750 --> 00:05:28,870 ‫we already have all the data about the tour itself 110 00:05:28,870 --> 00:05:30,840 ‫and so now we can simply put that 111 00:05:30,840 --> 00:05:33,270 ‫data into our HTML so that 112 00:05:33,270 --> 00:05:36,630 ‫JavaScript can then read it from there, okay? 113 00:05:36,630 --> 00:05:39,570 ‫So basically, we are gonna expose the location data, 114 00:05:39,570 --> 00:05:42,327 ‫right here as a string in the HTML and 115 00:05:42,327 --> 00:05:45,080 ‫our JavaScript will then pick it up from there 116 00:05:45,080 --> 00:05:49,500 ‫without having to do, like any API call separately. 117 00:05:49,500 --> 00:05:52,760 ‫So, lets come down here to our 118 00:05:52,760 --> 00:05:56,270 ‫map class or actually section, okay? 119 00:05:56,270 --> 00:05:59,950 ‫So this section here, and it already has a Diff element with 120 00:05:59,950 --> 00:06:01,460 ‫a map class, 121 00:06:01,460 --> 00:06:05,410 ‫and you will see why it is an ID a bit later 122 00:06:05,410 --> 00:06:08,800 ‫okay? But for now I want to actually specify a 123 00:06:08,800 --> 00:06:10,870 ‫data attribute here, okay? 124 00:06:10,870 --> 00:06:13,470 ‫So there is a very nice trick in JavaScript where 125 00:06:13,470 --> 00:06:17,030 ‫we can specify a data attribute in HTML, 126 00:06:17,030 --> 00:06:19,580 ‫and then read said attribute using JavaScript 127 00:06:19,580 --> 00:06:21,100 ‫in a very easy way. 128 00:06:21,100 --> 00:06:23,010 ‫And this is how it works, 129 00:06:23,010 --> 00:06:25,710 ‫so we can say "data/" and then here 130 00:06:25,710 --> 00:06:27,730 ‫whatever we want to call it, 131 00:06:27,730 --> 00:06:29,593 ‫in this case we say "locations" 132 00:06:31,800 --> 00:06:36,560 ‫all right? And then we set that to our tour.locations. 133 00:06:36,560 --> 00:06:38,410 ‫Now before actually doing that 134 00:06:38,410 --> 00:06:42,840 ‫we need to transform that array into a string, right? 135 00:06:42,840 --> 00:06:45,540 ‫So, lets quickly take a look at that. 136 00:06:45,540 --> 00:06:50,170 ‫So our locations is this whole array with 137 00:06:50,170 --> 00:06:51,930 ‫these object in there. 138 00:06:51,930 --> 00:06:55,320 ‫But in HTML, of course we cannot have arrays or 139 00:06:55,320 --> 00:06:58,480 ‫objects or anything like that, and so 140 00:06:58,480 --> 00:07:00,010 ‫what we have to do is to 141 00:07:00,010 --> 00:07:02,740 ‫convert all of that into a string. 142 00:07:02,740 --> 00:07:05,003 ‫And that is fortunately quite easy, 143 00:07:06,230 --> 00:07:11,230 ‫All we have to do is "JSON.stringify " 144 00:07:11,680 --> 00:07:12,513 ‫all right? 145 00:07:13,417 --> 00:07:16,960 ‫And then here tour.location, 146 00:07:16,960 --> 00:07:17,793 ‫or actually that's 147 00:07:17,793 --> 00:07:19,610 ‫locations. All right? 148 00:07:19,610 --> 00:07:21,063 ‫And if we give it now a save, 149 00:07:23,040 --> 00:07:28,040 ‫let's open it up here and inspect this map here, 150 00:07:28,290 --> 00:07:31,120 ‫and so now you see data locations, 151 00:07:31,120 --> 00:07:33,620 ‫and we have this huge string here, 152 00:07:33,620 --> 00:07:36,493 ‫which basically contains all our location data. 153 00:07:38,050 --> 00:07:39,670 ‫All right, 154 00:07:39,670 --> 00:07:42,420 ‫and so, now in our JavaScript 155 00:07:42,420 --> 00:07:44,023 ‫we can get that very easily. 156 00:07:46,950 --> 00:07:49,670 ‫So, locations are at 157 00:07:50,670 --> 00:07:52,983 ‫document.getElementById and 158 00:07:56,260 --> 00:07:59,810 ‫then map, and now here it goes the part of the trick, 159 00:07:59,810 --> 00:08:04,800 ‫because whatever we put into a data attribute like this, 160 00:08:04,800 --> 00:08:07,820 ‫will then get stored into the dataset property, 161 00:08:07,820 --> 00:08:11,020 ‫and in this case dataset.locations, because 162 00:08:11,020 --> 00:08:15,813 ‫it's called data/ or data- location. 163 00:08:16,980 --> 00:08:20,470 ‫Okay? So just like this, 164 00:08:20,470 --> 00:08:24,823 ‫dataset.locations, 165 00:08:25,700 --> 00:08:26,533 ‫okay? 166 00:08:26,533 --> 00:08:28,210 ‫And now we get all of these errors here 167 00:08:28,210 --> 00:08:29,453 ‫coming from ESlint, 168 00:08:30,347 --> 00:08:33,480 ‫and so that's because ESlint is configured for 169 00:08:33,480 --> 00:08:35,900 ‫Node.js and not for JavaScript , 170 00:08:35,900 --> 00:08:37,900 ‫and so what we can do here is to 171 00:08:37,900 --> 00:08:40,973 ‫basically disable ESlint for this entire file, 172 00:08:41,923 --> 00:08:46,210 ‫until we say basically with a comment in the beginning here, 173 00:08:48,300 --> 00:08:52,670 ‫ESlint disable and so yes, it will then understand this 174 00:08:52,670 --> 00:08:57,000 ‫and completely turn it off for this entire file, okay? 175 00:08:57,000 --> 00:08:59,100 ‫So that is the locations data here that 176 00:08:59,100 --> 00:09:01,320 ‫we just put in our HTML, 177 00:09:01,320 --> 00:09:03,460 ‫but remember that that's a string and 178 00:09:03,460 --> 00:09:07,285 ‫so we need to convert it back to JSON, and so 179 00:09:07,285 --> 00:09:09,660 ‫JSON.parse 180 00:09:11,410 --> 00:09:13,683 ‫and then everything that's in here. 181 00:09:15,960 --> 00:09:20,160 ‫All right, and so now let's actually take a look at that 182 00:09:20,160 --> 00:09:22,510 ‫just to see if everything is working correctly. 183 00:09:26,720 --> 00:09:27,823 ‫Let's reload, 184 00:09:28,770 --> 00:09:32,873 ‫and now something went wrong here in our Mapbox file, 185 00:09:33,740 --> 00:09:36,063 ‫well that also seems correct actually, 186 00:09:37,120 --> 00:09:42,120 ‫so let's just test if it actually is called map here 187 00:09:45,030 --> 00:09:47,830 ‫and indeed it is an ID with map, 188 00:09:47,830 --> 00:09:51,160 ‫and so I believe that probably the problem is that 189 00:09:51,160 --> 00:09:53,360 ‫at the time we called 190 00:09:53,360 --> 00:09:55,803 ‫or get element by ID, 191 00:09:56,690 --> 00:09:58,560 ‫so this here, 192 00:09:58,560 --> 00:10:01,210 ‫so probably at this time the DOM is actually 193 00:10:01,210 --> 00:10:04,060 ‫not already loaded, okay? And so that's 194 00:10:04,060 --> 00:10:08,530 ‫because we have our script integrated right at 195 00:10:08,530 --> 00:10:09,963 ‫the beginning of the file, 196 00:10:11,440 --> 00:10:14,300 ‫so this script here is right in the head, 197 00:10:14,300 --> 00:10:17,580 ‫while it really should be at the bottom of the page. Okay? 198 00:10:17,580 --> 00:10:19,760 ‫So let me actually copy this one here and 199 00:10:19,760 --> 00:10:21,720 ‫put it manually in the base, 200 00:10:21,720 --> 00:10:24,580 ‫so I'll copy it and comment it out, 201 00:10:24,580 --> 00:10:27,610 ‫but don't worry we will actually still use 202 00:10:27,610 --> 00:10:31,270 ‫this block append technique here a bit later in the video, 203 00:10:31,270 --> 00:10:34,100 ‫because there is some stuff coming from Mapbox that 204 00:10:34,100 --> 00:10:35,750 ‫we still need to put in the head, 205 00:10:36,920 --> 00:10:40,170 ‫okay? But for now let's just actually put this 206 00:10:40,170 --> 00:10:42,483 ‫script here right at the bottom of the page. 207 00:10:44,600 --> 00:10:45,433 ‫Okay? 208 00:10:47,220 --> 00:10:48,750 ‫That (Laughs) of course, 209 00:10:48,750 --> 00:10:51,200 ‫I just wanted to go to another file, 210 00:10:51,200 --> 00:10:54,360 ‫so I could save it so that the server actually reloads 211 00:10:54,360 --> 00:10:56,180 ‫because these pug files, 212 00:10:56,180 --> 00:10:57,880 ‫as you've probably have noticed here, 213 00:10:57,880 --> 00:11:00,610 ‫they do not trigger a restart 214 00:11:00,610 --> 00:11:03,010 ‫of our server, all right? 215 00:11:03,010 --> 00:11:06,805 ‫Anyway, I'm hopeful that now it's going to work 216 00:11:06,805 --> 00:11:09,150 ‫and indeed, it does. 217 00:11:09,150 --> 00:11:11,070 ‫So we have an array here, 218 00:11:11,070 --> 00:11:15,060 ‫and indeed these are the four locations of our tour. 219 00:11:15,060 --> 00:11:18,190 ‫Okay so now we have everything nicely integrated, 220 00:11:18,190 --> 00:11:21,170 ‫and all ready to integrate Mapbox and 221 00:11:21,170 --> 00:11:23,010 ‫create our own map here. 222 00:11:23,010 --> 00:11:25,960 ‫But in order to not create a too long video, 223 00:11:25,960 --> 00:11:28,113 ‫I will actually do that in the next one.