-: So in this video we're gonna display a marker
wherever we click on the map.
And for that we are gonna use one more time,
the leaflet library.
And just to make sure that we're following the right path
according to our flow chart here, let's take a look at it.
And so indeed when the page loads,
then we get to current location.
So the coordinates of that, and then after that is done
the map is rendered in the current location.
And so now what we're gonna do next
is to bind an event handler,
so that whenever the user clicks on the map,
we can then display a marker on the map.
So for now we're gonna jump this one and this one,
and continue working with the map.
And so we're gonna basically render a workout on the map,
which is not yet a workout,
but we're simply gonna put a pin or a marker on the map
and then later we can replace that
with the data coming from the workout.
All right?
So let's go do that.
And the first thing that we need to do
is to actually add the event handler to the map
so that we can then handle any incoming clicks.
Now, how are we gonna do that?
I mean, should we simply attach an event listener
to this whole map element here?
That wouldn't really work because then we would have no way
of knowing where exactly the user clicked here on the map.
So basically we would have no way of knowing
the GPS coordinates of whatever location
the user clicked here on the map.
Because that is data that only the map knows, right?
So when I click, let's say here where I am right now,
then I want to handle that click exactly at that position.
And so therefore we need access to the coordinates
of the point that was just clicked.
So in summary, what I'm trying to say
is that we cannot simply use the add event listener method
that we have been using all the time.
Instead, we can use something similar
that is actually available on Leaflet.
So in the leaflet library.
And so this is where now this map variable here
comes into play for the first time.
So when we first wrote this coord here
or actually pasted it from the leaflet documentation,
I didn't really explain why we were doing this.
So why we were storing the result
of creating the map into a variable,
but now this is gonna be important
because it's onto this map object here
where we can now basically add an event listener.
So the idea is similar to what we do
using add event listener but on the map,
we can simply do this.
So map.on,
and so again this on method here
is not coming from JavaScript itself.
It is instead of coming from the leaflet library.
So this map object here is in fact an object
that was generated by a leaflet.
So we can see that because of this L here
and so therefore this is gonna be a special object
with a couple of methods and properties on it.
And in fact let's actually start
by taking a look at it in the console.
So map, and let's see what we get here.
So down here it is, let's get some more space here.
And so here you see, there's a lot of stuff in here.
Also, you see that the developers of this library
also use this underscore convention here
basically to make these methods and properties protected.
And so simply by taking a look at this coord here,
we already know that we should not
basically manipulate this here manually.
So let's just look at the ones that don't have this.
So there should be this on method that I'm using,
but maybe it's simply inheriting that.
So let's see.
It's also not here.
It doesn't really matter anyway.
So I was just trying to show you what happens here,
but here it actually is.
So here is the on method
that we are now using basically as an event listener.
So here is the on method that we're now basically gonna use
instead of the standard built-in that event listener method.
Now, right? So, yeah.
This was really just to show you a little bit
the internals of the leaflet library,
because I think that it's important that
you can also take a look at coord written by other people.
And so you saw that they also use the prototype chain
and very heavily in fact,
you saw that they also use the underscore convention.
And if you wanna dig really deep into that coord,
I'm sure there's gonna be a lot
of interesting stuff in there.
But anyway, let's not add here the event listener basically.
And here we can also specify the type of event
and then here or call back function.
So again, the idea here is indeed very similar.
Now when leaflet calls this function here,
it will do so with a special map event. Okay?
So again, just like in standard JavaScript,
we get access to an event,
but this one is an event created by leaflet.
So let's just call it mapEvent.
And then let's actually simply take a look
at this event for now.
And so this console.log here should now happen
whenever we click on the map.
And so again, map is that variable here,
which is the result of calling leaflet, So L.map.
So let's see, and it always takes
a little bit of time to loading this map.
So let's just click here somewhere,
and you'll see that immediately we got this event down here.
Right? And then actually right here in lat lng,
we then get the coordinates of the point that was clicked.
Great. Let's try another one just to see
if the coordinates are different.
And you see, they are a little bit different indeed.
And so now we can take this event object,
take the coordinates of latitude and longitude,
and then add a marker at exactly that point.
So we already know how to create a marker,
even though this is a very simplistic one.
And so we're gonna improve it a little bit.
But for now let's just take this coord
and then here let's take the latitude
and longitude from this object.
So we can destructure it because remember there was
a lat and a lng variable inside of mapEvent.lat,
I think lng like this,
but let's check again just to make sure
because I don't really remember it.
So the pin from the beginning here is now gone indeed.
Let's now click somewhere here.
And now we got this pin right here in the center
and that's because we didn't fix our coord yet,
but for now I just wanted to take a look.
So that's the lat lng object right there.
And then in there, there is an object with lat lng.
So these are the two values
that we just took out of this object.
Okay. But now let's actually then put this pin exactly
where we click instead of putting it in the center,
like we are doing it right now.
So this coords here is of course the center of the map
that we specified before.
So that is coming from geolocation.
And now we want to use this lat and lng.
So let's specify in URL, lat lng,
and therefore now let's just write like Workout.
And again, we're gonna change this in a minute
to make it a bit better.
But now I'm just interested in seeing
if the popup is appearing in the right place
and let's wait for it.
And there you go.
Now I click this one then to here and indeed it works.
So great, that's beautiful already,
but now watch what happens whenever I click.
So whenever I add a new marker,
you see that this popup here always closes, right?
But in our demo, I actually have it so
that they always keep open.
So if I click here and add another one,
and the data doesn't matter here now.
Then you see that all the others remain open.
And I think that that is actually a better option.
And all right, now you also see
that I added some custom formatting to these popups.
So for example the running one always has this green border
while the cycling one has this orange border.
And that's because in leaflet,
we are able to add our own class names to the popup.
So there's a lot of stuff
that we can do with popups in leaflet.
And so let's now try to experiment with a couple of them.
So it starts here with L.marker.
And so this is basically the coord
that adds the marker to the map.
And this one is all still correct.
There's nothing to change here.
Then here we add .marker to the map.
So essentially .marker creates the marker
and then .addTo adds it to the map.
And so that's similar to here,
where we first select a title layer
and then we add that tile layer
to the map again, using .addTo.
And all of these methods,
they are in the documentation of leaflet
and we're actually gonna go there in a minute, okay?
Next we then have bindPopup,
which will basically create a popup
and bind it to the marker.
And so here, we simply pass in this string.
Now, so that's why we get to work out in all of the markers.
But here, instead of specifying a string,
we can also create a brand new popup object,
which will then contain a couple of options.
And so that is what I'm gonna do here now.
So instead of this, I will do L.pop up
and then here I can pass in a couple of options,
but now let's actually go to the leaflet documentation
because otherwise all of this
will simply appear like magic to you.
So I don't want to just write the coord here
and you copying it, instead I want to show you
where I'm getting it from in the documentation
because reading documentation will be something
really really important in your job as a developer.
Because as I just mentioned previously
every library that you're gonna use
will have some documentation,
so that you can actually know how to use it.
Cause otherwise you would have no idea, right?
And so reading documentation
will certainly become part of the job.
So let's just go here to leaflet.
And then basically on every page of every library,
you will always find something called
like docs or documentation.
And so here is a bunch of stuff that you can take a look at.
Now here, I will just take a look at the UI layers,
which are the markers, popup and tool tip.
So as for the marker, this is basically what we did before.
So L.marker then add to map.
And so this is exactly what we already have.
So this is an example, as we can see here,
but down here is how we should actually do it.
So how exactly this marker function should be called.
So we can pass in or have to pass in the latitude longitude.
And we can also pass in an object of options.
And so here are then all the options
that are available for the marker,
but in this case we don't have any.
So I'm keeping it fairly simple here,
but even on a marker, we can change all kinds of stuff.
For example, we could change opacity, as you see here
we could also like riseOnHover.
So then the marker will get on top of others
when you hover the mouse over it.
And so now you see there's all kinds of stuff
that we can do here,
But let's not go actually to the popup.
So you see there's a lot of stuff here.
And as always, I encourage you to take a look at it.
But now again, let's talk about the popup itself.
And so again, here you see that L.popup
can take in an object of options.
And so this is what we will do now.
And that's the popup that we will then use on the marker
to create a popup that is attached to the marker.
So the first two that I want to specify
is the maxWidth and the minWidth,
so that the popup always has a nice size.
And so basically we will now create an object
with these two properties.
So let's set this one to 250
and the minWidth to let's say just 100 pixels, all right.
Now, next up, I want to change that behavior
where the popup of one macro closes
when we create a new one.
And so that's this autoClose here.
So we use this one when we want to override
the default behavior of the popup closing
when another popup is opened.
And so this is exactly the one we are looking for.
And so by default, it is true.
And so let's set that to false.
So autoClose set it to false.
And then finally, there's also closeOnClick,
which again will prevent popups from closing
but this time, whenever the user clicks on the map.
So as we see here, that's the default behavior.
And so let's put this one here, to false as well.
And again, I'm doing all this
so that I can show you a little bit
how we work with documentation.
So finally we have also the className.
And so, as I mentioned before,
we can use this one to assign any CSS class name
that we want to the popup.
And so this is gonna be useful
to style it according to our needs.
And so in our CSS, I already have a class for popups,
so let's just search for popup.
So here is a lot of stuff,
but the ones that we are interested in
is running-popup and cycling-popup.
So these here are basically styles
that I assigned automatically to all the popups in leaflet.
So that's why they have this dark background color
and why they have the font size that they have.
So all of that, I actually already styled here using CSS.
But now I want to be able to add a custom class as well
so that I can style the running activities, with this green
and the cycling ones, with this orange.
So later we will identify in this class here dynamically,
but for now let's put all of them to running pop up.
And so that's actually already it.
Now, finally, we also need to set then the text back
because right now we don't have any texts
here in our markers.
So if I click here, can you see, we indeed get a marker
and it even has this class here.
And let's just see what happens when I click another one.
And yeah, that works.
So all of them stay open just as we wanted.
But as I was saying before, they don't have any content yet.
And so we need to set that.
And that is actually again on the marker, I believe.
So it's a method that's on the marker.
So let's see where it is.
Maybe it's one of these ones inherited from layer.
So you see that these are basically classes
that leaflet uses
and so then the marker can inherit methods
from other classes, essentially.
And so here is the method that I was actually looking for
and so setPopupContent is the one that we're looking for
because here we can then specify a string
or even an HTMLElement
in order to give the popup some content.
Now, another thing that's interesting
to see here in the documentation
is that all these methods always returned this.
So basically the current object
which then makes all of these methods chainable.
So remember how we did exactly that
by the end of the previous section
to also make methods in our own classes chainable.
And so you'll see that the leaflet developers
are here indeed using the exact same technique.
So again, I think that's pretty interesting to see.
But now let's copy this method here and add a tier.
So before we actually open the popup here in the next line,
and for now, let's just set it back to work out
and then let's go back and see.
So for some reason, this always takes some time.
Now, here we are.
And yeah, now it says workout.
They all stay opened and you see that when we click here,
then the map even pans so that it can fit the new popup.
Great, So this works really fine,
but in the final application,
obviously the marker is not put on the map immediately
because the popup itself,
will contain data about the workout.
And so we first needed that data.
And so here in the real application, when we click,
what happens is that this form here opens,right?
And so if we take a look at our flow chart
that's also then gonna be the next step.
So basically we have the render workout form
whenever the user clicks on a map.
And so in the next lecture,
this year is what we're gonna implement.