So in this video,
we gonna learn how to display
a map using a third party library called Leaflet.
So to start let's quickly Google Leaflet
and probably the first result will already
be for this library.
So you'll see that Leaflet
is an open source JavaScript library
for mobile-friendly interactive maps.
So essentially this is a library
that some other developers wrote
and that we can now include
for free our own code and use it.
And in this case,
we can use it to display in maps
and whenever we use a third-party library,
the first thing to do is to basically include it
in our site.
And so let's come here to the Downloads Page.
And so here we can download Leaflet
to our computer if we wanted
or we can also use a hosted version of Leaflet.
And this basically means that we can use
a version of this library that is already hosted
by someone else.
So in this case,
it is a CDN which is a Content Delivery Network.
And so it has this URL here.
So that stands for unpackaged.com.
And then here we have the Leaflet Library.
So actually we will need a CSS file
and we will also need a JavaScript file.
Now, there are also a bit more elegant ways
of including JavaScript,
for example using a package manager like NPM.
And then all we would have to do
is NPM install Leaflet into our application.
And actually this is how we will do it in the future.
So in one of the next sections,
we will actually learn how to do this
using the NPM package manager,
but for now probably the easiest way
to get started is to simply include
a hosted version that is on a CDN.
And so let's grab this code here
and paste it in our HTMLs' hat.
So right here and to before our own script
and that's very important.
All right, so this here is our script
and of course it is in our script
where we will then use the Leaflet Library.
And so by the time that our script loads,
the browser must already have downloaded
the Leaflet Library because otherwise
our code will not be able to work without library.
And that makes sense, right?
Now here we also want to specify actually
the Differ Attribute.
So as we learned previously,
we should never put any JavaScript
in the header without any of the Differ or Async Attributes.
And since the order matters here,
remember, we must then use the Differ Attribute.
And so this is actually a perfect example
for when we need to use Differ because again
here the order in which the scripts are downloaded
is actually very important.
Okay, so give it a safe here
and then let's go back to the Leaflet site.
So we already included the Library into our site,
but of course we need to do something with it.
So on its own this Leaflet script here doesn't do anything.
So we now need to use basically
the functions that are defined
in this Library to our advantage
and so to actually use the Library on our own page.
And so down here,
there is a very simple example
of how we could implement a map
with a certain coordinates here.
So these coordinates and then also how
to display a very simple marker like this one.
So again let's just go to this overview page here.
So basically the very first page
and then just copy this very simple code that we have here.
So copy it and then this is what
I actually want to happen
when the browser is successful getting the coordinates.
So let's paste this here,
give it a safe and now of course,
we need to adapt this here to our current situation.
First that's made as a const and not a var
then whatever string
that we pass here into this map function
must be the ID name of an element in our HTML.
And it is in that element where the map
will be displayed.
And so what that means is that in our HTML
we need an element with the ID of map
and that should already be here.
So that is down here.
So here I have this empty div and it has the ID of map.
And so that's exactly this here
so I could change it here
and then of course I would also have
to change it in the HTML.
Now this L here this is basically
the main function that Leaflet gives us as an entry point.
So basically this is kind of
the namespace a little bit like for example,
this Intel namespace for the Internationalization API.
So we talked about namespaces before
and so Leaflet basically gives us this L namespace here
and then that L has a couple
of methods that we can use.
And one of them is this map method.
Another one is this tile layer
where we actually need to define the tiles of our map
and then we can also display markers like this.
So this should probably already render a map on our page.
It will do that on these coordinates
but for now that's okay for us.
So let's just see if this actually worked,
now let's try to reload here,
but for some reason,
nothing is happening.
So let's check if you're in the console,
we actually have access to that L variable
and just see that we do.
So this L here is of course the L
that we use previously in our code as well.
So it's this L here and it is available here
in this script and also here in the browser console
because it is essentially a global variable
inside of the script of Leaflet, right?
So here in this script
that we include here leaflets.js,
the L variable is a global variable
that we then can access from all the other scripts.
And I think that this is something
that we never saw happening before,
because we never worked with multiple scripts.
So let me show it a little bit better to you
and include another script here.
Let's call it just other.js.
So I'm creating it here, other.js
and now let's define first name here,
set it to Jonas and then here in these gripped.js,
I should be able to access that variable.
So let's see and here it is.
And so the reason for that is that
this first name variable is a global variable here
in this script.
And so again,
any variable that is global in any script
will be available to all the other scripts
while as long as they appear after that script
here included in the HTML.
So script.js has access to all the global variables
in othe.js when other.js and leaflet.js
but for example, other.js does not have access
to anything from script.js
because it appears afterwards, all right?
So in other, let's see any variable here.
So for example the month,
so here we will not have access to month.
All right, so month is not defined.
And so the reason for that again,
is that by the time that this script here is executed,
this other.js, script.js has not yet been loaded.
And so therefore it doesn't find
this month variable anywhere in global scope.
All right but this was just an example.
Let's get rid of this.
Well, not get rid, let's just comment it out here maybe.
And anyway, maybe you noticed that already
the map here has appeared this time.
And so what that means is that our code is working.
Now, this one here is simply appearing in London
and that is because we still have the default code,
but now you can probably see that
what we want to do here is to use our own latitude
and longitude here, right?
So let's create an array called coards like this
and it will contain first the latidude
so that's the standard first latitude
and then the longitude.
And now let's use that array here,
because as you see this set view method expects
this array of coordinates,
then it also expects this second parameter,
but let's talk about that one later.
So here it's coards and then let's also use
the same coordinates here for the marker.
All right. Let's check again
and all right, that works.
Now here we just have this error
from the first variable that we created
in the other script but what matters here
is that now we have this beautiful map here,
right at my, well approximate location right now.
Now that other number that we saw in the function
is basically the zoom level of the map.
So we can zoom in and zoom out here on this.
And so now let's try it with some other values here,
for example 10
then you'll see that it's a lot more zoomed out,
but let's say we use 17.
Then that's probably going to be pretty close,
that's probably as close as it gets.
And actually 13 is a pretty a reasonable number.
So let's keep it at 13.
And now let's talk about this tile layer here.
So the map that we see on the page
is basically made up of small tiles
and these tiles they come from this URL here,
which basically is from open street map.
And maybe you have heard of open street map
and it's basically an open source map
that everyone can use for free.
And so open street map is actually
the one that we gonna use,
but Leaflet works with all other kinds of maps as well,
for example with Google maps
if that's the one that you prefer.
Now, we can also use this URL here to change
the appearance of our map.
So what we see here right now
or hopefully soon is basically
the default map of open street maps.
Now, however, when you Google around a little bit,
you can find different styles.
And so what I want to do now
is to change this style to another one that I've found.
And so to do that,
you can simply change this one here to fr
and then here it is /hot/ and that's actually it.
So that's simply another theme of these tiles.
And so if you give it a safe
then now you see that it looks different
and in my opinion that actually looks a lot better.
So when you refresh,
maybe you see that it builds up basically in this tiles.
So did you see that?
So basically these maps squares,
they appear one by one.
And so that's what I mean by tiles.
So those are the tiles that the map is made out of.
Just get rid of this error here
and then I think that for now,
this is actually enough.
So we also have this marker down here.
And so that's for this marker plus this pop-up,
but let's talk about in the next lecture,
how we can actually create our own ones
and then also display a pop-up and a marker
wherever we click on the map.
So if I clicked here,
then I wanted a popup here in the marker
or if I clicked over here,
then I wanted the marker to be here.
And so that gonna require a little bit more work.
And so let's leave that for the next video.