‫Let's now continue building our map integration.
‫And so let's now actually head over to Mapbox.
‫And so, I'm using Mapbox instead of Google Maps now
‫and that's because some time ago,
‫Google Maps started to actually require
‫a credit card from you in order
‫to be able to use Google Maps.
‫And I don't think that's a good idea for a course like this
‫and, actually, I also really like Mapbox,
‫and so, I think it's perfect for us to use in this course.
‫They also have excellent documentation
‫that we're gonna try out in a second here.
‫But for now, let's start and create a new account.
‫So just hit here on start building.
‫And then, of course, create your free account.
‫I already have one and so, just pause the video
‫at this point in order to create that account.
‫And after creating your account, you should
‫land on a page that looks something like this.
‫Now by the time you are watching this video,
‫this page here might, of course,
‫have changed, and probably it has,
‫but what we need to do now is to
‫find a link which says something like this,
‫so install the maps software development kit,
‫so this here, or also integrate Mapbox,
‫which should be pretty much the same.
‫So I'll click here on install the maps for JavaScript.
‫And what we're gonna do here
‫is to use the Mapbox CDN
‫so the content delivery network
‫and for now at least
‫not the NPM module bundler.
‫So the first step, as it says here,
‫is to include these files here and to the had HTML file.
‫And so that's where we now need that
‫extend head technique that we had before.
‫And so that's where we now actually need
‫that extending the head technique.
‫Here in the tour,
‫remember how we moved this out of the head, actually.
‫But now we still need some stuff that we
‫need to append to the head.
‫And so that's this script, and this style sheet as well.
‫Let's quickly translate this here to pug.
‫And the link as well,
‫and that's actually it.
‫Let's get rid of this part,
‫and let's go back to the next step here.
‫Next up, we need to copy this JavaScript code here,
‫into our file.
‫And to our script, of course.
‫So right here into mapbox.js.
‫Now you will probably not have this access token
‫at this point,
‫and so it either required you to already do it,
‫or otherwise I will show you how to do it in a second.
‫Let's just indent this part here.
‫With this, we're actually already good to go.
‫This should in fact already create a map
‫and display it on our page.
‫That's because the container here is set to map.
‫And what that means is that it will put the map
‫on an element with the ID of map.
‫That's why here, in our tour, we have
‫this element here,
‫oh, where is that?
‫So right here, we have an element with ID map.
‫The reason for that is that here in Mapbox,
‫we actually need an element with
‫an ID that we can then specify here.
‫And the default is map,
‫and so that's how I called it in html.
‫Then we also have this default style here,
‫that we're gonna change in a second.
‫For now, let's go back to our instructions here,
‫and so it says that we're done here.
‫But now let's actually go back to our account
‫and create that token that we need
‫in order to be able to actually access Mapbox.
‫Please don't just copy my token,
‫that's not going to work well for you.
‫But instead, create your own.
‫You can just create a new name for it.
‫Let's just call it something like this.
‫And then create token here.
‫Then you put your password,
‫and so, you can then use that token.
‫So, again, I'm not sure if it already created
‫this token for you, or if you really needed
‫to create a new one.
‫Anyway, it's also nice to have one token for each project,
‫so that you can then restrict
‫that token to only that project.
‫I created my account here a long time ago,
‫and so I'm not really sure, again, how that worked,
‫but anyway, having that token you should now be good to go.
‫In fact, this should now already display our default map.
‫So let's reload, and indeed, this is our default map.
‫It doesn't look really nice,
‫well we can zoom in,
‫but really, the style isn't all that nice,
‫and doesn't really match our website,
‫and of course,
‫we also do not have our locations
‫anywhere plotted to the map.
‫And so let's now take care of all of that.
‫Let's go back to Mapbox,
‫and now we go into our design studio.
‫Let's just click here on "start designing a map,"
‫or again, if your website looks a
‫bit different at this point,
‫then just search for the design studio.
‫Maybe it shows up somewhere here.
‫So let's try that.
‫Here, we can really do all kinds of stuff
‫regarding designing a map.
‫Actually, this is not really what I expected,
‫because it's a bit too complex to change
‫all of this stuff here,
‫but there are some default styles,
‫ah yeah, this is what I was looking for.
‫Let's create new style here,
‫and then from there we can kind of choose a default.
‫And really what I want is this light style.
‫So create, and actually I'm very happy with
‫the way it looks out of the box.
‫Now, for some reason I don't see anything here,
‫okay, that's because it was zoomed into the sea.
‫But anyway, let's now zoom in somewhere here,
‫and I think it looks pretty nice already,
‫and so let's just add a name to it here,
‫and so I'm calling it
‫Natour's Video Recording
‫because I already have a Natour's style,
‫but you of course can call it anything you want.
‫Let's confirm the name here, go back,
‫and then we here on share and use.
‫And what we want is not share, but instead use.
‫Somewhere down here, we should see our style URL,
‫and so, yeah, that's the one.
‫So it has to be a URL basically starting with Mapbox.
‫Let's just copy it, go back,
‫and then replace the style that we have here as a default,
‫with the one that we just created.
‫Give it a save,
‫and
‫yeah, that looks much better.
‫And it is exactly the style that we just created.
‫So we can now zoom in, zoom out,
‫or actually the other way around,
‫we can pan the map to wherever we want,
‫and we can also define a ton of properties,
‫of options to this map.
‫Right now, whenever we load the map,
‫it always looks the same,
‫always centered here in Boston.
‫But we can change that by specifying
‫the center here.
‫And so we need to pass in an array of two coordinates.
‫Let's actually get the one from LA
‫that we used before in Postman,
‫So exactly this,
‫but, actually, Mapbox is exactly like MongoDB,
‫in aspect to first requiring a longitude,
‫and then the latitude.
‫We need to switch them here around.
‫And let's take a look at what we get.
‫And, well, that doesn't really take us anywhere.
‫Let's also specify a zoom level here.
‫Let's say four.
‫Maybe that fixes it.
‫And actually, that was this illusion.
‫So there are different zoom levels.
‫For example we can try out one here as well,
‫and that should be then way more zoomed in,
‫or maybe zoomed out, I'm not really sure.
‫Ah, okay, so that really zooms it out all the way.
‫So let's say 10 here for example,
‫and as you see I really like to play around
‫with this kind of stuff,
‫and yeah, at 10 it's now really zoomed close.
‫We can also say that we want it to not be interactive,
‫and so that's very simple.
‫Let's set interactive to false.
‫And then basically your map is going
‫to look like a simple image on your website.
‫So as you see, I cannot scroll anything here,
‫and I can also not pan it.
‫So there's nothing I can do now.
‫And these are actually just a couple of options
‫that we can set.
‫Let's actually go back here to Mapbox,
‫and to the documentation and Mapbox JavaScript.
‫Here you get all the documentation for really
‫everything you can do with the JavaScript version of Mapbox.
‫What I just wanted to show you is that the stuff that
‫I just showed you is actually here.
‫So we have the container that we specified,
‫we have the style,
‫and we have really a bunch of stuff.
‫So interactive,
‫and if you want you can of course play around
‫with all of these.
‫I just wanted to show you that this is how you
‫can learn some more stuff about Mapbox.
‫Now, we actually don't want any of this.
‫Because we don't want to center the map anywhere,
‫but instead we want it to automatically figure out
‫the position of the map based on our tour location points.
‫What we're gonna do now is basically put
‫all the locations for a certain tour on the map,
‫and then allow the map to basically figure out
‫automatically which portion of the map it should display
‫in order to fit all of these points correctly.
‫The first thing that we need to do is to
‫create a bound variable.
‫Bounds equal a new Mapbox GL.latitutde longitude bounds.
‫And we get access to this Mapbox object
‫because we included the Mapbox library
‫at the beginning of our page.
‫Right here,
‫including this script here,
‫so this Mapbox library,
‫this is what exposes the Mapbox GL object,
‫which we can then use throughout our site.
‫This bounds object here is basically the area
‫that will be displayed on the map.
‫We will now extend that with all the locations
‫that are in our locations array.
‫And this will make a bit more sense once we
‫actually start using that.
‫Let's now loop through all our locations
‫and add a marker for each of them.
‫For each,
‫and let's see lock for locations,
‫and so here we want to add a marker.
‫And for that, we actually need to create
‫a new html element,
‫in this regard, it really is a little bit low level,
‫but I find that actually really nice,
‫because, like this, we have a lot of control
‫over what's actually happening in our map.
‫And what I'm showing you here is actually just
‫a tiny fraction of all the great stuff
‫that you can do with Mapbox.
‫This here is just a standard JavaScript,
‫and so we can use create element
‫in order to create elements.
‫Just as the name says,
‫and here we want to create a new diff.
‫And we also want to give is a class name,
‫and set that to marker.
‫And here it is, it's a semicolon.
‫And so in the CSS we then actually
‫have a class for this marker.
‫Marker, here you see the background image that is specified,
‫which is this green pin here.
‫That pin that you're gonna see in a second on the map,
‫is actually a custom image that I designed.
‫It's not coming directly from Mapbox.
‫Like this, you can really adjust it to your own style
‫and your own brand.
‫I also defined the size of the marker here,
‫yeah, it's really customizable.
‫Now we actually create a new marker inside of Mapbox
‫by saying new Mapbox GL.marker.
‫And then in there, we pass the element that we just created,
‫so L, and then we also specify an anchor property.
‫Which I set
‫to bottom here.
‫And what that means is that it's the bottom of the element,
‫and so in this case the bottom of that pin,
‫which is going to be located at the exact GPS location.
‫We could also put it in the center,
‫but I think it makes more sense that,
‫let's open that image up again,
‫I think it makes more sense that this end here
‫of the image is the one that really points to the
‫exact GPS location.
‫That's what we do with this anchor property.
‫So that is the marker,
‫and now, on that, we can call a couple of methods.
‫Right now, Mapbox knows nothing about the GPS coordinates
‫of this marker.
‫We didn't set that anywhere.
‫Let's do that now,
‫so set longitude, latitude, and equal to
‫location.coordinates.
‫Remember that this here is an array of longitude
‫and latitude forced.
‫That's exactly what Mapbox expects.
‫Just to make sure you really understand,
‫let's take a look at the tours.
‫Again, each location has these coordinates property,
‫and so that's where we now are reading the coordinates from.
‫Location.coordinates.
‫And then, finally, add to and then our map variable.
‫So this map here is this map variable where we
‫created our new Mapbox.map right in the beginning.
‫And now, all we need to do to finish,
‫is to actually extend our bounds.
‫So bounds.extend and also with locations, or actually "loc",
‫which is the current location.coordinates.
‫This first part here actually adds the marker,
‫or it creates,
‫let's actually make it even more specific,
‫create marker
‫then add the marker
‫and then here, extend the map bounds
‫to include the current location.
‫But that is still not enough,
‫because now we also make it so that the map
‫actually fits the bounds.
‫So map.fit, no not find, but fit bounds,
‫and then of course our bounds object.
‫Whew.
‫So, a lot of work just for putting some markers on the map.
‫But, again, I find it really pleasant
‫to work with this library.
‫And let's now actually take a look
‫and I'm not really sure if everything went well here.
‫And actually, it didn't,
‫so our maps are not really anywhere to be found,
‫let's just zoom out a little bit to see if
‫they are actually somewhere,
‫and they are not.
‫Let's take a look at our console,
‫and indeed there is some kind of error.
‫So lat, longitude bounds is not a constructor,
‫and indeed it is the other way around.
‫So again, Mapbox, just like MongoDB,
‫expects coordinates to be longitude first,
‫and then latitude.
‫That's what we have
‫here in this name,
‫and so here it should be the same.
‫So longitude, latitude.
‫Let's try that again here.
‫Ahh, now that works.
‫Very nice.
‫You saw that nice zoom.
‫That's what the fit bounds method does.
‫So it moves and zooms the map right to the bounds
‫to actually fit our markers.
‫Now, you see that we have this kind of other elements here
‫overlapping our map.
‫And so that's because of this design that I created
‫with these edges here.
‫But that's no problem because we can actually
‫manually specify some padding to these bounds.
‫We can pass in an object here,
‫and so let's say top 200 pixels,
‫bottom also 200 pixels,
‫and then left and right 100 pixels.
‫And we don't have to specify the pixels here,
‫I guess that's just me writing so much CSS.
‫Let's try that again.
‫Oh, nice zoom animation,
‫but that didn't really respect our settings.
‫And actually, that's because this is not correct.
‫So, we should instead create an object,
‫and then in there we need to specify the padding property,
‫which then has all of this.
‫So let's do that.
‫Padding.
‫And now,
‫cut this and put it there.
‫Give it a save here.
‫One more time.
‫Man, something is still wrong here.
‫What's that?
‫Ahh, and of course this code should not be here.
‫It's not in the extend, it is indeed here in fit bounds.
‫So this is actually where it makes sense to be.
‫Let's fix this code here, and now that makes sense.
‫Of course it needs to be in the fit bounds,
‫which is in the end, the function who executes
‫the moving and the zooming.
‫That's where the padding should be,
‫and we could specify a bunch of other options.
‫And again, if you're interested in that,
‫just go check out the documentation.
‫So a third try here,
‫let's hope this time I got it right,
‫ahh, and yes, that looks a lot better.
‫But, there is still some stuff we can improve here,
‫because right now we cannot even know
‫what each of these locations is.
‫And so we actually want kind of a pop-up here,
‫which then displays information about the location.
‫Not only the marker, but we also want to add a pop-up.
‫And so that's a bit similar to actually adding the marker,
‫so we say new Mapbox GL.popup.
‫Then, just like before, we specify the coordinates
‫of that pop-up.
‫So that one right here.
‫Then we also need to define the html for this pop-up,
‫and I'm gonna do that now using the set html method,
‫because that then will allow me to add some content
‫right into that html,
‫so set html, and then a template string here.
‫I want this to be a paragraph,
‫and the information that I want to display here is
‫the day at which we're going to be at this location,
‫and then the name of the location.
‫So basically, I want to display the day,
‫so that's why we created these day properties here,
‫and then the description.
‫Day, and then location, remember which is the current
‫location indie for each loop,
‫and then day,
‫location.description.
‫Give it a save here,
‫that looks a lot nicer now.
‫And then, just like with the other one, we also need to
‫do add to, and then our map variable.
‫And this will not look perfect, because we need to
‫specify some options, but I still wanted to
‫show you the result at this point.
‫And so, you see that they actually overlap
‫the markers now.
‫We can actually fix that using an offset property.
‫We pass that options right here into the new pop-up.
‫We say
‫offset of 30 pixels.
‫And I also noticed that we have a bit too much
‫padding at the bottom,
‫so let's reduce that to 150 and do this again.
‫And so, this looks pretty nice I think.
‫So whoever now takes a look at our page,
‫can very quickly see what kind of itinerary
‫will be on this tour.
‫And if there's too much information,
‫we can also close up these pop-ups.
‫And we could really add all kinds of stuff to this map.
‫For example, we could create this lines
‫here between these points,
‫and join them together, like a green line here or something.
‫Or we could also display the real route
‫from one point to the other
‫by using basically directions,
‫but let's keep it simple here.
‫The only thing that is left to do here for me,
‫is to actually disable the zoom functionality.
‫Because right now, let's say that we are
‫zooming on this page,
‫or actually if we're scrolling on this page,
‫and so once we reach this here,
‫and then keep scrolling here,
‫then we scroll the map instead of the page.
‫That's not a good user experience,
‫and so all we need to do now
‫is to basically disable the scrolling functionality
‫on this map.
‫We will still allow people to pan around like this,
‫but zooming is going to be disabled.
‫Let's go here to our map and add that.
‫And we're not using interactive defaults,
‫because then we could not even pan the map.
‫But again, that should at least be allowed.
‫The option that I'm setting here is scroll zoom false.
‫And again, for all the possible options
‫that you could set here,
‫please just go ahead and take a look at the reference.
‫And so now, when we put our mouse here and scroll,
‫it doesn't change the zoom level.
‫Perfect.
‫We can still pan, and so I think it looks really nice now.
‫Let's test this out in another one.
‫Let's say here the forest hiker.
‫And so, that still works.
‫And these here are kind of overlapping,
‫but no problem, we can always close them if we want.
‫Let's take a look here for example, sea explorer.
‫And if we're quick enough,
‫we can even see the zoom animation
‫moving the map to that location.
‫Okay, perfect.
‫So I hope you were able to really follow along
‫this example with everything we did in Mapbox.
‫Now in case that anything didn't work,
‫please make sure that you're using
‫a similar version to mine,
‫so what I mean is a similar version of the Mapbox library.
‫Which in my case here is version 0.54.
‫Yours should probably not be 1.something.
‫So if you're watching this video a
‫long time after this recording and have a V1 here,
‫then please go ahead and change that to 0.something,
‫so that there are basically no breaking changes there.
‫Anyway, with that, we actually wrap up our tour page,
‫and so we no longer need any of this,
‫the map is also there,
‫and so, this part of the website is actually finished.
‫Awesome.
‫Congratulations for making that a reality,
‫for really starting to build this beautiful website
‫using all these amazing technologies
‫that you've learned so far.