1 00:00:00,780 --> 00:00:04,163 ‫Let's now continue building our map integration. 2 00:00:05,720 --> 00:00:08,637 ‫And so let's now actually head over to Mapbox. 3 00:00:11,036 --> 00:00:15,090 ‫And so, I'm using Mapbox instead of Google Maps now 4 00:00:15,090 --> 00:00:16,710 ‫and that's because some time ago, 5 00:00:16,710 --> 00:00:19,260 ‫Google Maps started to actually require 6 00:00:19,260 --> 00:00:21,300 ‫a credit card from you in order 7 00:00:21,300 --> 00:00:23,220 ‫to be able to use Google Maps. 8 00:00:23,220 --> 00:00:26,640 ‫And I don't think that's a good idea for a course like this 9 00:00:26,640 --> 00:00:29,160 ‫and, actually, I also really like Mapbox, 10 00:00:29,160 --> 00:00:33,723 ‫and so, I think it's perfect for us to use in this course. 11 00:00:35,500 --> 00:00:37,720 ‫They also have excellent documentation 12 00:00:37,720 --> 00:00:40,130 ‫that we're gonna try out in a second here. 13 00:00:40,130 --> 00:00:43,330 ‫But for now, let's start and create a new account. 14 00:00:43,330 --> 00:00:45,623 ‫So just hit here on start building. 15 00:00:48,208 --> 00:00:51,960 ‫And then, of course, create your free account. 16 00:00:51,960 --> 00:00:54,370 ‫I already have one and so, just pause the video 17 00:00:54,370 --> 00:00:58,200 ‫at this point in order to create that account. 18 00:00:58,200 --> 00:01:00,210 ‫And after creating your account, you should 19 00:01:00,210 --> 00:01:02,960 ‫land on a page that looks something like this. 20 00:01:02,960 --> 00:01:05,009 ‫Now by the time you are watching this video, 21 00:01:05,009 --> 00:01:06,820 ‫this page here might, of course, 22 00:01:06,820 --> 00:01:09,430 ‫have changed, and probably it has, 23 00:01:09,430 --> 00:01:11,020 ‫but what we need to do now is to 24 00:01:11,020 --> 00:01:13,900 ‫find a link which says something like this, 25 00:01:13,900 --> 00:01:17,281 ‫so install the maps software development kit, 26 00:01:17,281 --> 00:01:21,850 ‫so this here, or also integrate Mapbox, 27 00:01:21,850 --> 00:01:24,455 ‫which should be pretty much the same. 28 00:01:24,455 --> 00:01:29,025 ‫So I'll click here on install the maps for JavaScript. 29 00:01:29,025 --> 00:01:30,720 ‫And what we're gonna do here 30 00:01:30,720 --> 00:01:33,100 ‫is to use the Mapbox CDN 31 00:01:33,100 --> 00:01:35,050 ‫so the content delivery network 32 00:01:35,050 --> 00:01:36,500 ‫and for now at least 33 00:01:36,500 --> 00:01:38,503 ‫not the NPM module bundler. 34 00:01:40,230 --> 00:01:43,500 ‫So the first step, as it says here, 35 00:01:43,500 --> 00:01:47,941 ‫is to include these files here and to the had HTML file. 36 00:01:47,941 --> 00:01:51,121 ‫And so that's where we now need that 37 00:01:51,121 --> 00:01:54,663 ‫extend head technique that we had before. 38 00:01:56,970 --> 00:01:58,860 ‫And so that's where we now actually need 39 00:01:58,860 --> 00:02:01,293 ‫that extending the head technique. 40 00:02:02,443 --> 00:02:04,060 ‫Here in the tour, 41 00:02:04,060 --> 00:02:07,690 ‫remember how we moved this out of the head, actually. 42 00:02:07,690 --> 00:02:10,550 ‫But now we still need some stuff that we 43 00:02:10,550 --> 00:02:12,940 ‫need to append to the head. 44 00:02:12,940 --> 00:02:16,533 ‫And so that's this script, and this style sheet as well. 45 00:02:17,570 --> 00:02:19,833 ‫Let's quickly translate this here to pug. 46 00:02:26,250 --> 00:02:28,533 ‫And the link as well, 47 00:02:31,470 --> 00:02:33,300 ‫and that's actually it. 48 00:02:33,300 --> 00:02:34,663 ‫Let's get rid of this part, 49 00:02:35,930 --> 00:02:39,370 ‫and let's go back to the next step here. 50 00:02:39,370 --> 00:02:43,720 ‫Next up, we need to copy this JavaScript code here, 51 00:02:43,720 --> 00:02:45,885 ‫into our file. 52 00:02:45,885 --> 00:02:48,050 ‫And to our script, of course. 53 00:02:48,050 --> 00:02:51,140 ‫So right here into mapbox.js. 54 00:02:51,140 --> 00:02:53,860 ‫Now you will probably not have this access token 55 00:02:53,860 --> 00:02:55,360 ‫at this point, 56 00:02:55,360 --> 00:02:58,180 ‫and so it either required you to already do it, 57 00:02:58,180 --> 00:03:01,343 ‫or otherwise I will show you how to do it in a second. 58 00:03:02,586 --> 00:03:05,230 ‫Let's just indent this part here. 59 00:03:05,230 --> 00:03:09,510 ‫With this, we're actually already good to go. 60 00:03:09,510 --> 00:03:11,640 ‫This should in fact already create a map 61 00:03:11,640 --> 00:03:14,090 ‫and display it on our page. 62 00:03:14,090 --> 00:03:17,760 ‫That's because the container here is set to map. 63 00:03:17,760 --> 00:03:20,260 ‫And what that means is that it will put the map 64 00:03:20,260 --> 00:03:23,270 ‫on an element with the ID of map. 65 00:03:23,270 --> 00:03:26,410 ‫That's why here, in our tour, we have 66 00:03:27,280 --> 00:03:29,010 ‫this element here, 67 00:03:29,010 --> 00:03:30,003 ‫oh, where is that? 68 00:03:31,100 --> 00:03:34,760 ‫So right here, we have an element with ID map. 69 00:03:34,760 --> 00:03:37,730 ‫The reason for that is that here in Mapbox, 70 00:03:37,730 --> 00:03:39,390 ‫we actually need an element with 71 00:03:39,390 --> 00:03:41,940 ‫an ID that we can then specify here. 72 00:03:41,940 --> 00:03:43,920 ‫And the default is map, 73 00:03:43,920 --> 00:03:46,750 ‫and so that's how I called it in html. 74 00:03:46,750 --> 00:03:48,900 ‫Then we also have this default style here, 75 00:03:48,900 --> 00:03:50,700 ‫that we're gonna change in a second. 76 00:03:52,070 --> 00:03:54,393 ‫For now, let's go back to our instructions here, 77 00:03:56,530 --> 00:03:59,720 ‫and so it says that we're done here. 78 00:03:59,720 --> 00:04:02,707 ‫But now let's actually go back to our account 79 00:04:02,707 --> 00:04:06,185 ‫and create that token that we need 80 00:04:06,185 --> 00:04:09,650 ‫in order to be able to actually access Mapbox. 81 00:04:09,650 --> 00:04:11,460 ‫Please don't just copy my token, 82 00:04:11,460 --> 00:04:13,990 ‫that's not going to work well for you. 83 00:04:13,990 --> 00:04:16,270 ‫But instead, create your own. 84 00:04:16,270 --> 00:04:19,363 ‫You can just create a new name for it. 85 00:04:21,760 --> 00:04:23,713 ‫Let's just call it something like this. 86 00:04:26,010 --> 00:04:28,200 ‫And then create token here. 87 00:04:28,200 --> 00:04:29,550 ‫Then you put your password, 88 00:04:32,040 --> 00:04:35,640 ‫and so, you can then use that token. 89 00:04:35,640 --> 00:04:38,150 ‫So, again, I'm not sure if it already created 90 00:04:38,150 --> 00:04:40,860 ‫this token for you, or if you really needed 91 00:04:40,860 --> 00:04:42,360 ‫to create a new one. 92 00:04:42,360 --> 00:04:46,500 ‫Anyway, it's also nice to have one token for each project, 93 00:04:46,500 --> 00:04:47,820 ‫so that you can then restrict 94 00:04:47,820 --> 00:04:50,668 ‫that token to only that project. 95 00:04:50,668 --> 00:04:54,160 ‫I created my account here a long time ago, 96 00:04:54,160 --> 00:04:57,530 ‫and so I'm not really sure, again, how that worked, 97 00:04:57,530 --> 00:05:01,073 ‫but anyway, having that token you should now be good to go. 98 00:05:03,730 --> 00:05:07,883 ‫In fact, this should now already display our default map. 99 00:05:09,250 --> 00:05:13,990 ‫So let's reload, and indeed, this is our default map. 100 00:05:13,990 --> 00:05:15,960 ‫It doesn't look really nice, 101 00:05:15,960 --> 00:05:17,313 ‫well we can zoom in, 102 00:05:19,390 --> 00:05:21,620 ‫but really, the style isn't all that nice, 103 00:05:21,620 --> 00:05:24,110 ‫and doesn't really match our website, 104 00:05:24,110 --> 00:05:25,090 ‫and of course, 105 00:05:25,090 --> 00:05:27,198 ‫we also do not have our locations 106 00:05:27,198 --> 00:05:29,627 ‫anywhere plotted to the map. 107 00:05:29,627 --> 00:05:33,700 ‫And so let's now take care of all of that. 108 00:05:33,700 --> 00:05:35,914 ‫Let's go back to Mapbox, 109 00:05:35,914 --> 00:05:38,783 ‫and now we go into our design studio. 110 00:05:40,280 --> 00:05:42,900 ‫Let's just click here on "start designing a map," 111 00:05:42,900 --> 00:05:44,720 ‫or again, if your website looks a 112 00:05:44,720 --> 00:05:46,200 ‫bit different at this point, 113 00:05:46,200 --> 00:05:49,313 ‫then just search for the design studio. 114 00:05:50,680 --> 00:05:53,093 ‫Maybe it shows up somewhere here. 115 00:05:56,220 --> 00:05:57,433 ‫So let's try that. 116 00:06:01,560 --> 00:06:04,330 ‫Here, we can really do all kinds of stuff 117 00:06:04,330 --> 00:06:07,010 ‫regarding designing a map. 118 00:06:07,010 --> 00:06:10,340 ‫Actually, this is not really what I expected, 119 00:06:10,340 --> 00:06:13,670 ‫because it's a bit too complex to change 120 00:06:13,670 --> 00:06:15,090 ‫all of this stuff here, 121 00:06:15,090 --> 00:06:18,670 ‫but there are some default styles, 122 00:06:18,670 --> 00:06:20,670 ‫ah yeah, this is what I was looking for. 123 00:06:21,520 --> 00:06:23,640 ‫Let's create new style here, 124 00:06:23,640 --> 00:06:27,790 ‫and then from there we can kind of choose a default. 125 00:06:27,790 --> 00:06:30,483 ‫And really what I want is this light style. 126 00:06:31,400 --> 00:06:34,560 ‫So create, and actually I'm very happy with 127 00:06:34,560 --> 00:06:37,330 ‫the way it looks out of the box. 128 00:06:37,330 --> 00:06:39,972 ‫Now, for some reason I don't see anything here, 129 00:06:39,972 --> 00:06:43,937 ‫okay, that's because it was zoomed into the sea. 130 00:06:43,937 --> 00:06:48,937 ‫But anyway, let's now zoom in somewhere here, 131 00:06:50,570 --> 00:06:53,830 ‫and I think it looks pretty nice already, 132 00:06:53,830 --> 00:06:57,407 ‫and so let's just add a name to it here, 133 00:06:57,407 --> 00:06:58,550 ‫and so I'm calling it 134 00:07:00,790 --> 00:07:04,968 ‫Natour's Video Recording 135 00:07:04,968 --> 00:07:08,430 ‫because I already have a Natour's style, 136 00:07:08,430 --> 00:07:11,724 ‫but you of course can call it anything you want. 137 00:07:11,724 --> 00:07:16,340 ‫Let's confirm the name here, go back, 138 00:07:16,340 --> 00:07:19,230 ‫and then we here on share and use. 139 00:07:19,230 --> 00:07:23,393 ‫And what we want is not share, but instead use. 140 00:07:23,393 --> 00:07:28,393 ‫Somewhere down here, we should see our style URL, 141 00:07:28,640 --> 00:07:30,960 ‫and so, yeah, that's the one. 142 00:07:30,960 --> 00:07:34,877 ‫So it has to be a URL basically starting with Mapbox. 143 00:07:37,480 --> 00:07:40,630 ‫Let's just copy it, go back, 144 00:07:40,630 --> 00:07:43,640 ‫and then replace the style that we have here as a default, 145 00:07:43,640 --> 00:07:45,363 ‫with the one that we just created. 146 00:07:47,699 --> 00:07:49,363 ‫Give it a save, 147 00:07:50,750 --> 00:07:51,630 ‫and 148 00:07:54,060 --> 00:07:56,650 ‫yeah, that looks much better. 149 00:07:56,650 --> 00:07:59,650 ‫And it is exactly the style that we just created. 150 00:07:59,650 --> 00:08:02,473 ‫So we can now zoom in, zoom out, 151 00:08:02,473 --> 00:08:04,830 ‫or actually the other way around, 152 00:08:04,830 --> 00:08:07,433 ‫we can pan the map to wherever we want, 153 00:08:08,964 --> 00:08:13,136 ‫and we can also define a ton of properties, 154 00:08:13,136 --> 00:08:15,123 ‫of options to this map. 155 00:08:15,960 --> 00:08:17,810 ‫Right now, whenever we load the map, 156 00:08:17,810 --> 00:08:19,230 ‫it always looks the same, 157 00:08:19,230 --> 00:08:21,510 ‫always centered here in Boston. 158 00:08:21,510 --> 00:08:24,230 ‫But we can change that by specifying 159 00:08:25,720 --> 00:08:26,803 ‫the center here. 160 00:08:28,600 --> 00:08:31,580 ‫And so we need to pass in an array of two coordinates. 161 00:08:31,580 --> 00:08:34,610 ‫Let's actually get the one from LA 162 00:08:34,610 --> 00:08:37,473 ‫that we used before in Postman, 163 00:08:42,356 --> 00:08:43,189 ‫So exactly this, 164 00:08:48,210 --> 00:08:51,870 ‫but, actually, Mapbox is exactly like MongoDB, 165 00:08:51,870 --> 00:08:55,200 ‫in aspect to first requiring a longitude, 166 00:08:55,200 --> 00:08:56,603 ‫and then the latitude. 167 00:08:58,270 --> 00:09:00,020 ‫We need to switch them here around. 168 00:09:02,925 --> 00:09:05,363 ‫And let's take a look at what we get. 169 00:09:07,330 --> 00:09:10,083 ‫And, well, that doesn't really take us anywhere. 170 00:09:12,330 --> 00:09:15,953 ‫Let's also specify a zoom level here. 171 00:09:17,310 --> 00:09:18,400 ‫Let's say four. 172 00:09:18,400 --> 00:09:19,843 ‫Maybe that fixes it. 173 00:09:26,030 --> 00:09:29,153 ‫And actually, that was this illusion. 174 00:09:30,221 --> 00:09:33,150 ‫So there are different zoom levels. 175 00:09:33,150 --> 00:09:35,820 ‫For example we can try out one here as well, 176 00:09:35,820 --> 00:09:38,760 ‫and that should be then way more zoomed in, 177 00:09:38,760 --> 00:09:41,460 ‫or maybe zoomed out, I'm not really sure. 178 00:09:41,460 --> 00:09:45,040 ‫Ah, okay, so that really zooms it out all the way. 179 00:09:45,040 --> 00:09:46,943 ‫So let's say 10 here for example, 180 00:09:49,180 --> 00:09:51,430 ‫and as you see I really like to play around 181 00:09:51,430 --> 00:09:53,320 ‫with this kind of stuff, 182 00:09:53,320 --> 00:09:57,360 ‫and yeah, at 10 it's now really zoomed close. 183 00:09:57,360 --> 00:10:00,913 ‫We can also say that we want it to not be interactive, 184 00:10:02,130 --> 00:10:04,400 ‫and so that's very simple. 185 00:10:04,400 --> 00:10:07,683 ‫Let's set interactive to false. 186 00:10:08,610 --> 00:10:10,610 ‫And then basically your map is going 187 00:10:10,610 --> 00:10:13,823 ‫to look like a simple image on your website. 188 00:10:15,960 --> 00:10:18,570 ‫So as you see, I cannot scroll anything here, 189 00:10:18,570 --> 00:10:20,650 ‫and I can also not pan it. 190 00:10:20,650 --> 00:10:22,955 ‫So there's nothing I can do now. 191 00:10:22,955 --> 00:10:25,940 ‫And these are actually just a couple of options 192 00:10:25,940 --> 00:10:26,803 ‫that we can set. 193 00:10:29,010 --> 00:10:32,090 ‫Let's actually go back here to Mapbox, 194 00:10:32,090 --> 00:10:36,093 ‫and to the documentation and Mapbox JavaScript. 195 00:10:39,160 --> 00:10:42,020 ‫Here you get all the documentation for really 196 00:10:42,020 --> 00:10:46,300 ‫everything you can do with the JavaScript version of Mapbox. 197 00:10:46,300 --> 00:10:48,790 ‫What I just wanted to show you is that the stuff that 198 00:10:48,790 --> 00:10:51,240 ‫I just showed you is actually here. 199 00:10:51,240 --> 00:10:53,550 ‫So we have the container that we specified, 200 00:10:53,550 --> 00:10:55,023 ‫we have the style, 201 00:10:55,990 --> 00:10:57,970 ‫and we have really a bunch of stuff. 202 00:10:57,970 --> 00:10:59,720 ‫So interactive, 203 00:10:59,720 --> 00:11:02,750 ‫and if you want you can of course play around 204 00:11:02,750 --> 00:11:03,873 ‫with all of these. 205 00:11:05,192 --> 00:11:08,120 ‫I just wanted to show you that this is how you 206 00:11:08,120 --> 00:11:11,400 ‫can learn some more stuff about Mapbox. 207 00:11:11,400 --> 00:11:14,496 ‫Now, we actually don't want any of this. 208 00:11:14,496 --> 00:11:17,800 ‫Because we don't want to center the map anywhere, 209 00:11:17,800 --> 00:11:20,490 ‫but instead we want it to automatically figure out 210 00:11:20,490 --> 00:11:24,551 ‫the position of the map based on our tour location points. 211 00:11:24,551 --> 00:11:26,739 ‫What we're gonna do now is basically put 212 00:11:26,739 --> 00:11:30,410 ‫all the locations for a certain tour on the map, 213 00:11:30,410 --> 00:11:32,660 ‫and then allow the map to basically figure out 214 00:11:32,660 --> 00:11:36,180 ‫automatically which portion of the map it should display 215 00:11:36,180 --> 00:11:39,280 ‫in order to fit all of these points correctly. 216 00:11:39,280 --> 00:11:41,540 ‫The first thing that we need to do is to 217 00:11:41,540 --> 00:11:43,713 ‫create a bound variable. 218 00:11:47,060 --> 00:11:52,060 ‫Bounds equal a new Mapbox GL.latitutde longitude bounds. 219 00:12:00,360 --> 00:12:03,320 ‫And we get access to this Mapbox object 220 00:12:03,320 --> 00:12:05,520 ‫because we included the Mapbox library 221 00:12:05,520 --> 00:12:06,983 ‫at the beginning of our page. 222 00:12:09,210 --> 00:12:10,113 ‫Right here, 223 00:12:11,270 --> 00:12:12,883 ‫including this script here, 224 00:12:14,050 --> 00:12:15,760 ‫so this Mapbox library, 225 00:12:15,760 --> 00:12:18,760 ‫this is what exposes the Mapbox GL object, 226 00:12:18,760 --> 00:12:21,193 ‫which we can then use throughout our site. 227 00:12:24,180 --> 00:12:26,870 ‫This bounds object here is basically the area 228 00:12:26,870 --> 00:12:29,589 ‫that will be displayed on the map. 229 00:12:29,589 --> 00:12:32,860 ‫We will now extend that with all the locations 230 00:12:32,860 --> 00:12:35,043 ‫that are in our locations array. 231 00:12:35,043 --> 00:12:37,597 ‫And this will make a bit more sense once we 232 00:12:37,597 --> 00:12:39,333 ‫actually start using that. 233 00:12:41,490 --> 00:12:44,050 ‫Let's now loop through all our locations 234 00:12:44,050 --> 00:12:46,203 ‫and add a marker for each of them. 235 00:12:48,150 --> 00:12:49,750 ‫For each, 236 00:12:49,750 --> 00:12:52,313 ‫and let's see lock for locations, 237 00:12:54,840 --> 00:12:58,150 ‫and so here we want to add a marker. 238 00:12:58,150 --> 00:13:00,160 ‫And for that, we actually need to create 239 00:13:00,160 --> 00:13:02,053 ‫a new html element, 240 00:13:04,228 --> 00:13:07,900 ‫in this regard, it really is a little bit low level, 241 00:13:07,900 --> 00:13:09,780 ‫but I find that actually really nice, 242 00:13:09,780 --> 00:13:12,230 ‫because, like this, we have a lot of control 243 00:13:12,230 --> 00:13:15,110 ‫over what's actually happening in our map. 244 00:13:15,110 --> 00:13:17,070 ‫And what I'm showing you here is actually just 245 00:13:17,070 --> 00:13:19,366 ‫a tiny fraction of all the great stuff 246 00:13:19,366 --> 00:13:22,083 ‫that you can do with Mapbox. 247 00:13:23,525 --> 00:13:26,593 ‫This here is just a standard JavaScript, 248 00:13:26,593 --> 00:13:28,928 ‫and so we can use create element 249 00:13:28,928 --> 00:13:31,490 ‫in order to create elements. 250 00:13:31,490 --> 00:13:33,040 ‫Just as the name says, 251 00:13:33,040 --> 00:13:35,490 ‫and here we want to create a new diff. 252 00:13:35,490 --> 00:13:38,653 ‫And we also want to give is a class name, 253 00:13:44,700 --> 00:13:46,193 ‫and set that to marker. 254 00:13:47,945 --> 00:13:50,170 ‫And here it is, it's a semicolon. 255 00:13:50,170 --> 00:13:52,500 ‫And so in the CSS we then actually 256 00:13:52,500 --> 00:13:54,313 ‫have a class for this marker. 257 00:13:57,140 --> 00:14:00,870 ‫Marker, here you see the background image that is specified, 258 00:14:00,870 --> 00:14:03,459 ‫which is this green pin here. 259 00:14:03,459 --> 00:14:07,210 ‫That pin that you're gonna see in a second on the map, 260 00:14:07,210 --> 00:14:10,110 ‫is actually a custom image that I designed. 261 00:14:10,110 --> 00:14:13,070 ‫It's not coming directly from Mapbox. 262 00:14:13,070 --> 00:14:16,500 ‫Like this, you can really adjust it to your own style 263 00:14:16,500 --> 00:14:17,333 ‫and your own brand. 264 00:14:17,333 --> 00:14:21,733 ‫I also defined the size of the marker here, 265 00:14:23,500 --> 00:14:25,363 ‫yeah, it's really customizable. 266 00:14:27,362 --> 00:14:32,335 ‫Now we actually create a new marker inside of Mapbox 267 00:14:32,335 --> 00:14:37,257 ‫by saying new Mapbox GL.marker. 268 00:14:40,230 --> 00:14:45,230 ‫And then in there, we pass the element that we just created, 269 00:14:45,400 --> 00:14:49,503 ‫so L, and then we also specify an anchor property. 270 00:14:51,100 --> 00:14:52,090 ‫Which I set 271 00:14:53,440 --> 00:14:54,910 ‫to bottom here. 272 00:14:54,910 --> 00:14:58,610 ‫And what that means is that it's the bottom of the element, 273 00:14:58,610 --> 00:15:01,230 ‫and so in this case the bottom of that pin, 274 00:15:01,230 --> 00:15:04,683 ‫which is going to be located at the exact GPS location. 275 00:15:05,790 --> 00:15:07,710 ‫We could also put it in the center, 276 00:15:07,710 --> 00:15:10,113 ‫but I think it makes more sense that, 277 00:15:11,260 --> 00:15:13,690 ‫let's open that image up again, 278 00:15:13,690 --> 00:15:16,520 ‫I think it makes more sense that this end here 279 00:15:16,520 --> 00:15:19,110 ‫of the image is the one that really points to the 280 00:15:19,110 --> 00:15:20,663 ‫exact GPS location. 281 00:15:22,512 --> 00:15:26,040 ‫That's what we do with this anchor property. 282 00:15:26,040 --> 00:15:27,680 ‫So that is the marker, 283 00:15:27,680 --> 00:15:31,896 ‫and now, on that, we can call a couple of methods. 284 00:15:31,896 --> 00:15:35,600 ‫Right now, Mapbox knows nothing about the GPS coordinates 285 00:15:35,600 --> 00:15:36,635 ‫of this marker. 286 00:15:36,635 --> 00:15:39,250 ‫We didn't set that anywhere. 287 00:15:39,250 --> 00:15:40,580 ‫Let's do that now, 288 00:15:40,580 --> 00:15:44,960 ‫so set longitude, latitude, and equal to 289 00:15:44,960 --> 00:15:47,423 ‫location.coordinates. 290 00:15:49,364 --> 00:15:54,301 ‫Remember that this here is an array of longitude 291 00:15:54,301 --> 00:15:55,990 ‫and latitude forced. 292 00:15:55,990 --> 00:15:59,471 ‫That's exactly what Mapbox expects. 293 00:15:59,471 --> 00:16:02,540 ‫Just to make sure you really understand, 294 00:16:02,540 --> 00:16:04,633 ‫let's take a look at the tours. 295 00:16:05,719 --> 00:16:09,670 ‫Again, each location has these coordinates property, 296 00:16:09,670 --> 00:16:12,693 ‫and so that's where we now are reading the coordinates from. 297 00:16:13,915 --> 00:16:16,323 ‫Location.coordinates. 298 00:16:18,040 --> 00:16:23,040 ‫And then, finally, add to and then our map variable. 299 00:16:25,070 --> 00:16:28,850 ‫So this map here is this map variable where we 300 00:16:28,850 --> 00:16:33,093 ‫created our new Mapbox.map right in the beginning. 301 00:16:34,507 --> 00:16:38,320 ‫And now, all we need to do to finish, 302 00:16:38,320 --> 00:16:40,463 ‫is to actually extend our bounds. 303 00:16:41,490 --> 00:16:46,490 ‫So bounds.extend and also with locations, or actually "loc", 304 00:16:48,540 --> 00:16:52,033 ‫which is the current location.coordinates. 305 00:16:56,310 --> 00:16:59,720 ‫This first part here actually adds the marker, 306 00:16:59,720 --> 00:17:00,950 ‫or it creates, 307 00:17:00,950 --> 00:17:03,120 ‫let's actually make it even more specific, 308 00:17:03,120 --> 00:17:04,310 ‫create marker 309 00:17:08,550 --> 00:17:09,910 ‫then add the marker 310 00:17:11,500 --> 00:17:15,540 ‫and then here, extend the map bounds 311 00:17:18,600 --> 00:17:21,653 ‫to include the current location. 312 00:17:22,624 --> 00:17:25,410 ‫But that is still not enough, 313 00:17:25,410 --> 00:17:27,850 ‫because now we also make it so that the map 314 00:17:27,850 --> 00:17:29,560 ‫actually fits the bounds. 315 00:17:29,560 --> 00:17:34,560 ‫So map.fit, no not find, but fit bounds, 316 00:17:39,310 --> 00:17:41,743 ‫and then of course our bounds object. 317 00:17:42,640 --> 00:17:43,473 ‫Whew. 318 00:17:43,473 --> 00:17:48,473 ‫So, a lot of work just for putting some markers on the map. 319 00:17:48,530 --> 00:17:50,829 ‫But, again, I find it really pleasant 320 00:17:50,829 --> 00:17:52,533 ‫to work with this library. 321 00:17:53,840 --> 00:17:55,800 ‫And let's now actually take a look 322 00:17:55,800 --> 00:17:58,450 ‫and I'm not really sure if everything went well here. 323 00:18:00,430 --> 00:18:02,300 ‫And actually, it didn't, 324 00:18:02,300 --> 00:18:05,264 ‫so our maps are not really anywhere to be found, 325 00:18:05,264 --> 00:18:07,630 ‫let's just zoom out a little bit to see if 326 00:18:07,630 --> 00:18:09,083 ‫they are actually somewhere, 327 00:18:10,049 --> 00:18:11,253 ‫and they are not. 328 00:18:13,070 --> 00:18:15,220 ‫Let's take a look at our console, 329 00:18:15,220 --> 00:18:17,883 ‫and indeed there is some kind of error. 330 00:18:18,910 --> 00:18:23,250 ‫So lat, longitude bounds is not a constructor, 331 00:18:23,250 --> 00:18:26,150 ‫and indeed it is the other way around. 332 00:18:26,150 --> 00:18:28,750 ‫So again, Mapbox, just like MongoDB, 333 00:18:28,750 --> 00:18:31,350 ‫expects coordinates to be longitude first, 334 00:18:31,350 --> 00:18:32,900 ‫and then latitude. 335 00:18:32,900 --> 00:18:34,314 ‫That's what we have 336 00:18:34,314 --> 00:18:36,420 ‫here in this name, 337 00:18:36,420 --> 00:18:38,350 ‫and so here it should be the same. 338 00:18:38,350 --> 00:18:42,813 ‫So longitude, latitude. 339 00:18:44,616 --> 00:18:47,193 ‫Let's try that again here. 340 00:18:48,990 --> 00:18:51,360 ‫Ahh, now that works. 341 00:18:51,360 --> 00:18:52,900 ‫Very nice. 342 00:18:52,900 --> 00:18:54,660 ‫You saw that nice zoom. 343 00:18:54,660 --> 00:18:57,290 ‫That's what the fit bounds method does. 344 00:18:57,290 --> 00:19:00,370 ‫So it moves and zooms the map right to the bounds 345 00:19:00,370 --> 00:19:03,000 ‫to actually fit our markers. 346 00:19:03,000 --> 00:19:07,180 ‫Now, you see that we have this kind of other elements here 347 00:19:07,180 --> 00:19:08,943 ‫overlapping our map. 348 00:19:08,943 --> 00:19:11,740 ‫And so that's because of this design that I created 349 00:19:11,740 --> 00:19:14,470 ‫with these edges here. 350 00:19:14,470 --> 00:19:16,490 ‫But that's no problem because we can actually 351 00:19:16,490 --> 00:19:20,323 ‫manually specify some padding to these bounds. 352 00:19:21,290 --> 00:19:23,860 ‫We can pass in an object here, 353 00:19:23,860 --> 00:19:27,363 ‫and so let's say top 200 pixels, 354 00:19:30,430 --> 00:19:32,830 ‫bottom also 200 pixels, 355 00:19:32,830 --> 00:19:35,273 ‫and then left and right 100 pixels. 356 00:19:42,561 --> 00:19:45,100 ‫And we don't have to specify the pixels here, 357 00:19:45,100 --> 00:19:47,883 ‫I guess that's just me writing so much CSS. 358 00:19:50,780 --> 00:19:52,053 ‫Let's try that again. 359 00:19:53,635 --> 00:19:55,440 ‫Oh, nice zoom animation, 360 00:19:55,440 --> 00:19:58,023 ‫but that didn't really respect our settings. 361 00:19:59,110 --> 00:20:02,850 ‫And actually, that's because this is not correct. 362 00:20:02,850 --> 00:20:05,180 ‫So, we should instead create an object, 363 00:20:05,180 --> 00:20:08,150 ‫and then in there we need to specify the padding property, 364 00:20:08,150 --> 00:20:09,673 ‫which then has all of this. 365 00:20:10,920 --> 00:20:11,770 ‫So let's do that. 366 00:20:14,130 --> 00:20:14,963 ‫Padding. 367 00:20:17,180 --> 00:20:18,013 ‫And now, 368 00:20:19,020 --> 00:20:20,913 ‫cut this and put it there. 369 00:20:23,970 --> 00:20:25,113 ‫Give it a save here. 370 00:20:27,790 --> 00:20:28,883 ‫One more time. 371 00:20:31,750 --> 00:20:34,310 ‫Man, something is still wrong here. 372 00:20:34,310 --> 00:20:35,840 ‫What's that? 373 00:20:35,840 --> 00:20:39,560 ‫Ahh, and of course this code should not be here. 374 00:20:39,560 --> 00:20:43,913 ‫It's not in the extend, it is indeed here in fit bounds. 375 00:20:45,060 --> 00:20:47,633 ‫So this is actually where it makes sense to be. 376 00:20:52,620 --> 00:20:57,333 ‫Let's fix this code here, and now that makes sense. 377 00:20:59,144 --> 00:21:00,890 ‫Of course it needs to be in the fit bounds, 378 00:21:00,890 --> 00:21:03,460 ‫which is in the end, the function who executes 379 00:21:03,460 --> 00:21:05,750 ‫the moving and the zooming. 380 00:21:05,750 --> 00:21:07,430 ‫That's where the padding should be, 381 00:21:07,430 --> 00:21:10,400 ‫and we could specify a bunch of other options. 382 00:21:10,400 --> 00:21:12,320 ‫And again, if you're interested in that, 383 00:21:12,320 --> 00:21:14,713 ‫just go check out the documentation. 384 00:21:15,810 --> 00:21:17,680 ‫So a third try here, 385 00:21:17,680 --> 00:21:19,730 ‫let's hope this time I got it right, 386 00:21:19,730 --> 00:21:23,520 ‫ahh, and yes, that looks a lot better. 387 00:21:23,520 --> 00:21:26,980 ‫But, there is still some stuff we can improve here, 388 00:21:26,980 --> 00:21:29,680 ‫because right now we cannot even know 389 00:21:29,680 --> 00:21:31,670 ‫what each of these locations is. 390 00:21:31,670 --> 00:21:35,290 ‫And so we actually want kind of a pop-up here, 391 00:21:35,290 --> 00:21:38,373 ‫which then displays information about the location. 392 00:21:41,110 --> 00:21:45,043 ‫Not only the marker, but we also want to add a pop-up. 393 00:21:49,270 --> 00:21:52,630 ‫And so that's a bit similar to actually adding the marker, 394 00:21:52,630 --> 00:21:57,133 ‫so we say new Mapbox GL.popup. 395 00:21:59,800 --> 00:22:02,300 ‫Then, just like before, we specify the coordinates 396 00:22:02,300 --> 00:22:03,623 ‫of that pop-up. 397 00:22:05,940 --> 00:22:07,523 ‫So that one right here. 398 00:22:08,610 --> 00:22:11,900 ‫Then we also need to define the html for this pop-up, 399 00:22:11,900 --> 00:22:14,990 ‫and I'm gonna do that now using the set html method, 400 00:22:14,990 --> 00:22:17,730 ‫because that then will allow me to add some content 401 00:22:17,730 --> 00:22:19,950 ‫right into that html, 402 00:22:19,950 --> 00:22:24,353 ‫so set html, and then a template string here. 403 00:22:26,040 --> 00:22:28,030 ‫I want this to be a paragraph, 404 00:22:28,030 --> 00:22:30,760 ‫and the information that I want to display here is 405 00:22:30,760 --> 00:22:33,630 ‫the day at which we're going to be at this location, 406 00:22:33,630 --> 00:22:36,250 ‫and then the name of the location. 407 00:22:36,250 --> 00:22:39,730 ‫So basically, I want to display the day, 408 00:22:39,730 --> 00:22:43,300 ‫so that's why we created these day properties here, 409 00:22:43,300 --> 00:22:44,753 ‫and then the description. 410 00:22:50,170 --> 00:22:54,520 ‫Day, and then location, remember which is the current 411 00:22:54,520 --> 00:22:56,623 ‫location indie for each loop, 412 00:22:57,860 --> 00:22:58,853 ‫and then day, 413 00:23:01,720 --> 00:23:03,543 ‫location.description. 414 00:23:06,870 --> 00:23:07,980 ‫Give it a save here, 415 00:23:07,980 --> 00:23:10,210 ‫that looks a lot nicer now. 416 00:23:10,210 --> 00:23:14,010 ‫And then, just like with the other one, we also need to 417 00:23:14,010 --> 00:23:19,010 ‫do add to, and then our map variable. 418 00:23:22,130 --> 00:23:24,380 ‫And this will not look perfect, because we need to 419 00:23:24,380 --> 00:23:26,730 ‫specify some options, but I still wanted to 420 00:23:26,730 --> 00:23:29,083 ‫show you the result at this point. 421 00:23:32,070 --> 00:23:35,100 ‫And so, you see that they actually overlap 422 00:23:35,100 --> 00:23:36,453 ‫the markers now. 423 00:23:37,920 --> 00:23:41,083 ‫We can actually fix that using an offset property. 424 00:23:43,560 --> 00:23:46,883 ‫We pass that options right here into the new pop-up. 425 00:23:48,396 --> 00:23:49,770 ‫We say 426 00:23:51,390 --> 00:23:54,940 ‫offset of 30 pixels. 427 00:23:54,940 --> 00:23:57,081 ‫And I also noticed that we have a bit too much 428 00:23:57,081 --> 00:23:59,840 ‫padding at the bottom, 429 00:23:59,840 --> 00:24:04,840 ‫so let's reduce that to 150 and do this again. 430 00:24:09,610 --> 00:24:13,190 ‫And so, this looks pretty nice I think. 431 00:24:13,190 --> 00:24:15,750 ‫So whoever now takes a look at our page, 432 00:24:15,750 --> 00:24:18,609 ‫can very quickly see what kind of itinerary 433 00:24:18,609 --> 00:24:21,533 ‫will be on this tour. 434 00:24:21,533 --> 00:24:23,740 ‫And if there's too much information, 435 00:24:23,740 --> 00:24:26,423 ‫we can also close up these pop-ups. 436 00:24:27,680 --> 00:24:30,700 ‫And we could really add all kinds of stuff to this map. 437 00:24:30,700 --> 00:24:33,440 ‫For example, we could create this lines 438 00:24:33,440 --> 00:24:35,250 ‫here between these points, 439 00:24:35,250 --> 00:24:38,570 ‫and join them together, like a green line here or something. 440 00:24:38,570 --> 00:24:41,096 ‫Or we could also display the real route 441 00:24:41,096 --> 00:24:42,820 ‫from one point to the other 442 00:24:42,820 --> 00:24:45,350 ‫by using basically directions, 443 00:24:45,350 --> 00:24:47,610 ‫but let's keep it simple here. 444 00:24:47,610 --> 00:24:49,990 ‫The only thing that is left to do here for me, 445 00:24:49,990 --> 00:24:53,430 ‫is to actually disable the zoom functionality. 446 00:24:53,430 --> 00:24:55,320 ‫Because right now, let's say that we are 447 00:24:55,320 --> 00:24:57,230 ‫zooming on this page, 448 00:24:57,230 --> 00:24:59,400 ‫or actually if we're scrolling on this page, 449 00:24:59,400 --> 00:25:01,450 ‫and so once we reach this here, 450 00:25:01,450 --> 00:25:03,740 ‫and then keep scrolling here, 451 00:25:03,740 --> 00:25:08,740 ‫then we scroll the map instead of the page. 452 00:25:09,034 --> 00:25:12,060 ‫That's not a good user experience, 453 00:25:12,060 --> 00:25:13,673 ‫and so all we need to do now 454 00:25:13,673 --> 00:25:17,110 ‫is to basically disable the scrolling functionality 455 00:25:17,110 --> 00:25:18,410 ‫on this map. 456 00:25:18,410 --> 00:25:22,880 ‫We will still allow people to pan around like this, 457 00:25:22,880 --> 00:25:24,883 ‫but zooming is going to be disabled. 458 00:25:26,200 --> 00:25:29,463 ‫Let's go here to our map and add that. 459 00:25:30,743 --> 00:25:33,760 ‫And we're not using interactive defaults, 460 00:25:33,760 --> 00:25:35,970 ‫because then we could not even pan the map. 461 00:25:35,970 --> 00:25:39,317 ‫But again, that should at least be allowed. 462 00:25:39,317 --> 00:25:43,680 ‫The option that I'm setting here is scroll zoom false. 463 00:25:46,580 --> 00:25:49,202 ‫And again, for all the possible options 464 00:25:49,202 --> 00:25:50,888 ‫that you could set here, 465 00:25:50,888 --> 00:25:55,190 ‫please just go ahead and take a look at the reference. 466 00:25:55,190 --> 00:25:58,730 ‫And so now, when we put our mouse here and scroll, 467 00:25:58,730 --> 00:26:01,463 ‫it doesn't change the zoom level. 468 00:26:03,040 --> 00:26:04,530 ‫Perfect. 469 00:26:04,530 --> 00:26:09,060 ‫We can still pan, and so I think it looks really nice now. 470 00:26:09,060 --> 00:26:12,083 ‫Let's test this out in another one. 471 00:26:12,920 --> 00:26:14,653 ‫Let's say here the forest hiker. 472 00:26:17,290 --> 00:26:19,450 ‫And so, that still works. 473 00:26:19,450 --> 00:26:22,130 ‫And these here are kind of overlapping, 474 00:26:22,130 --> 00:26:25,553 ‫but no problem, we can always close them if we want. 475 00:26:28,120 --> 00:26:30,713 ‫Let's take a look here for example, sea explorer. 476 00:26:32,420 --> 00:26:33,440 ‫And if we're quick enough, 477 00:26:33,440 --> 00:26:35,231 ‫we can even see the zoom animation 478 00:26:35,231 --> 00:26:38,100 ‫moving the map to that location. 479 00:26:38,100 --> 00:26:39,890 ‫Okay, perfect. 480 00:26:39,890 --> 00:26:42,680 ‫So I hope you were able to really follow along 481 00:26:42,680 --> 00:26:46,670 ‫this example with everything we did in Mapbox. 482 00:26:46,670 --> 00:26:49,060 ‫Now in case that anything didn't work, 483 00:26:49,060 --> 00:26:50,330 ‫please make sure that you're using 484 00:26:50,330 --> 00:26:51,863 ‫a similar version to mine, 485 00:26:52,870 --> 00:26:56,500 ‫so what I mean is a similar version of the Mapbox library. 486 00:26:56,500 --> 00:26:59,403 ‫Which in my case here is version 0.54. 487 00:27:00,870 --> 00:27:04,363 ‫Yours should probably not be 1.something. 488 00:27:05,250 --> 00:27:06,600 ‫So if you're watching this video a 489 00:27:06,600 --> 00:27:10,430 ‫long time after this recording and have a V1 here, 490 00:27:10,430 --> 00:27:14,891 ‫then please go ahead and change that to 0.something, 491 00:27:14,891 --> 00:27:18,213 ‫so that there are basically no breaking changes there. 492 00:27:19,242 --> 00:27:24,242 ‫Anyway, with that, we actually wrap up our tour page, 493 00:27:24,560 --> 00:27:27,140 ‫and so we no longer need any of this, 494 00:27:27,140 --> 00:27:30,140 ‫the map is also there, 495 00:27:30,140 --> 00:27:34,740 ‫and so, this part of the website is actually finished. 496 00:27:34,740 --> 00:27:35,573 ‫Awesome. 497 00:27:35,573 --> 00:27:38,660 ‫Congratulations for making that a reality, 498 00:27:38,660 --> 00:27:42,200 ‫for really starting to build this beautiful website 499 00:27:42,200 --> 00:27:44,200 ‫using all these amazing technologies 500 00:27:44,200 --> 00:27:45,663 ‫that you've learned so far.