All language subtitles for 013 Including a Map with Mapbox - Part 1_Downloadly.ir_en

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.