All language subtitles for 014 Including a Map with Mapbox - Part 2_Downloadly.ir_en

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.