‫Next up, you're gonna learn how
‫to integrate a nice map that displays all the locations of
‫a certain tour into our website using Mapbox.
‫But before we do that,
‫we first need to fix a small Bug that I just found.
‫So right now we are in the park camper tour,
‫but you see that up here it actually says
‫"The Forest Hiker" okay? And so,
‫That's obviously wrong
‫and so,
‫that's because here in our get tour handler,
‫we are always passing in this title,
‫so "The Forest Hiker Tour".
‫Which of course, is not correct so let's fix that.
‫Okay, and so let's say here
‫tour.name
‫and then tour.
‫Let's make that uppercase actually.
‫And so, now we should see "The park camper" tour
‫and yeah here it is.
‫And now about that map that is going to be
‫displayed here in this empty area,
‫we are gonna use a very nice library called "Mapbox"
‫and that library actually runs in the front end.
‫And so, in this lecture we are actually going to
‫write a little bit of front end code,
‫and not so much about the back end.
‫But this is still very important because
‫now you are gonna learn how to write JavaScript for
‫the client side and then integrate that into our templates.
‫Okay?
‫So let's do that
‫and first off remember that all the data,
‫so all the assets that are available on the client,
‫are here in this public folder.
‫So for example, our CSS file, our images and
‫we also have a folder here for JavaScript.
‫And currently that's empty and so let's
‫now actually create a new file in here called
‫Mapbox.js
‫Okay? And so this basically is a JavaScript file that
‫we are going to integrate into our HTML and
‫which will then run on the client side.
‫All right? So just like regular JavaScript that
‫you've been writing all your life (Laughs) Right?
‫But for now, let's simply do some simple console.log here
‫before we actually connect it with our back end.
‫So let's just say console.log hello from the client side.
‫All right,
‫and now let's actually integrate it into our templates.
‫Now it might appear that the best place to
‫do this integration is here in our base template right?
‫But in fact, we only want to include the Mapbox script on
‫the tour page, right?
‫So, how could we do that?
‫And the solution for that is once more,
‫extending a block here in our base template,
‫so I'm going to create a new block here that
‫we are then gonna extend from the tour. Okay?
‫And actually this block will be right here,
‫and I'm calling it "head" and
‫all of this content will actually be in there.
‫Now you might be wondering why we are doing that,
‫because when we extend the block
‫then the content inside that disappears.
‫So that's what happened here, right?
‫But actually there is another way of extending blocks,
‫which will then simply add the new content at the end
‫or at the beginning of the block.
‫All right? So let's see how we can do that.
‫And so right at the beginning here of our tour template,
‫let's now say:
‫block head,
‫and actually we say block append head, all right?
‫And so, whatever we will write in this block here
‫will then be appended to the content that's
‫already in that block.
‫Okay? And we could also use "prepend" and
‫then it would be added at the beginning of the block, okay?
‫And so now, all we are gonna do here is to
‫add a new script.
‫So using a script tag and then specifying the
‫source attribute, and so that is
‫for now "js/mapbox.js"
‫okay?
‫So again, this template here already extends
‫our base template,
‫and so with this here, we can basically inject
‫this line of code,
‫into the head block that is already in our base template.
‫And so, we append that, and so it will then appear here
‫at the end of this head block, so right here.
‫And actually let's try that our now.
‫So when I reload,
‫we now should get that message in our console
‫and indeed, "Hello from the client side"
‫Great
‫So, next up we want to actually get access to
‫the location data of the tour that
‫we are currently trying to display,
‫right here in the JavaScript file.
‫So how are going to do that?
‫Well, then we can do an Ajax request,
‫so basically a call to our API and
‫get the data from there.
‫But that's not really necessary in this case.
‫And so, let me show you a real nice trick.
‫So here in our tour template,
‫we already have all the data about the tour itself
‫and so now we can simply put that
‫data into our HTML so that
‫JavaScript can then read it from there, okay?
‫So basically, we are gonna expose the location data,
‫right here as a string in the HTML and
‫our JavaScript will then pick it up from there
‫without having to do, like any API call separately.
‫So, lets come down here to our
‫map class or actually section, okay?
‫So this section here, and it already has a Diff element with
‫a map class,
‫and you will see why it is an ID a bit later
‫okay? But for now I want to actually specify a
‫data attribute here, okay?
‫So there is a very nice trick in JavaScript where
‫we can specify a data attribute in HTML,
‫and then read said attribute using JavaScript
‫in a very easy way.
‫And this is how it works,
‫so we can say "data/" and then here
‫whatever we want to call it,
‫in this case we say "locations"
‫all right? And then we set that to our tour.locations.
‫Now before actually doing that
‫we need to transform that array into a string, right?
‫So, lets quickly take a look at that.
‫So our locations is this whole array with
‫these object in there.
‫But in HTML, of course we cannot have arrays or
‫objects or anything like that, and so
‫what we have to do is to
‫convert all of that into a string.
‫And that is fortunately quite easy,
‫All we have to do is "JSON.stringify "
‫all right?
‫And then here tour.location,
‫or actually that's
‫locations. All right?
‫And if we give it now a save,
‫let's open it up here and inspect this map here,
‫and so now you see data locations,
‫and we have this huge string here,
‫which basically contains all our location data.
‫All right,
‫and so, now in our JavaScript
‫we can get that very easily.
‫So, locations are at
‫document.getElementById and
‫then map, and now here it goes the part of the trick,
‫because whatever we put into a data attribute like this,
‫will then get stored into the dataset property,
‫and in this case dataset.locations, because
‫it's called data/ or data- location.
‫Okay? So just like this,
‫dataset.locations,
‫okay?
‫And now we get all of these errors here
‫coming from ESlint,
‫and so that's because ESlint is configured for
‫Node.js and not for JavaScript ,
‫and so what we can do here is to
‫basically disable ESlint for this entire file,
‫until we say basically with a comment in the beginning here,
‫ESlint disable and so yes, it will then understand this
‫and completely turn it off for this entire file, okay?
‫So that is the locations data here that
‫we just put in our HTML,
‫but remember that that's a string and
‫so we need to convert it back to JSON, and so
‫JSON.parse
‫and then everything that's in here.
‫All right, and so now let's actually take a look at that
‫just to see if everything is working correctly.
‫Let's reload,
‫and now something went wrong here in our Mapbox file,
‫well that also seems correct actually,
‫so let's just test if it actually is called map here
‫and indeed it is an ID with map,
‫and so I believe that probably the problem is that
‫at the time we called
‫or get element by ID,
‫so this here,
‫so probably at this time the DOM is actually
‫not already loaded, okay? And so that's
‫because we have our script integrated right at
‫the beginning of the file,
‫so this script here is right in the head,
‫while it really should be at the bottom of the page. Okay?
‫So let me actually copy this one here and
‫put it manually in the base,
‫so I'll copy it and comment it out,
‫but don't worry we will actually still use
‫this block append technique here a bit later in the video,
‫because there is some stuff coming from Mapbox that
‫we still need to put in the head,
‫okay? But for now let's just actually put this
‫script here right at the bottom of the page.
‫Okay?
‫That (Laughs) of course,
‫I just wanted to go to another file,
‫so I could save it so that the server actually reloads
‫because these pug files,
‫as you've probably have noticed here,
‫they do not trigger a restart
‫of our server, all right?
‫Anyway, I'm hopeful that now it's going to work
‫and indeed, it does.
‫So we have an array here,
‫and indeed these are the four locations of our tour.
‫Okay so now we have everything nicely integrated,
‫and all ready to integrate Mapbox and
‫create our own map here.
‫But in order to not create a too long video,
‫I will actually do that in the next one.