7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 8Length: 34 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Click Events

Leaflet.js makes it very easy to add click events to your maps. In this lesson, we will use this feature to figure out the coordinates of our polygons that we will create in the next lesson.

Useful Links

2.5 Click Events

Hello, and welcome back. Before we get into the creation of polygons on our map, I wanna talk about how to create click events. And the reason I wanna do this first is because creating polygons is tricky because you need to have the latitude and longitude coordinates for every corner on that polygon. So if I wanted to, let's zoom out of here a little bit. And we have this area northwest of Stonehenge called Fargo Plantation. So let's say I wanted to trace this and put a polygon around that, I would need to know the coordinates for every point on that polygon. Well, what I'm gonna do is I'm gonna create a click event that's going to console log every latitude, longitude coordinate that we click on. And then later we can use all of those coordinates in order to create a polygon that matches what we've clicked on on our map. So let's talk about how to do this. So we've got our starting pen here, you can find the URL in your course notes. I'm going to click on Fork, create a new copy, and we'll get started with this new copy. Now, creating a click event is very very simple. And the first thing I wanna do is I wanna create a function that's going to run whenever we trigger that click event. So I'm gonna create a function here called onMapClick. And we're gonna pass a value into this function, I'm just gonna call it e for event. And then inside the parentheses here, I'm gonna console log the latitude and longitude of the click event. So whenever we click on the map, Leaflet JS will pass the latitude and longitude of where you clicked into this event variable that we're passing into our onMapClick function. And the way we access that latitude and longitude is we point to the name of the parameter for this function, so that's called e. And then dot latlng, and that will give us our latitude and longitude for where we clicked. So now that we have this function, the next thing I wanna do is to create the actual click event. And we're going to attach the click even to our map, which we have stored in a variable called my map. So we're gonna say mymap.on, and then inside parenthesis and inside quotes, I'm gonna say click. That's the name of the event that we're triggering. And then after that, we're gonna type comma, space, and then the name of the function that we want to run whenever we trigger that click event. And the name of that function is onMapClick. And then we'll put a semicolon at the end of that statement. So now I'm going to hit F12 with Chrome opened in order to take a look at our console. If your console doesn't show up here, make sure you click on the Console tab. And with that Console tab open, we can now click on the map. And wherever we click, you'll see a latitude and a longitude shows up. So if we wanted to use this technique in order to figure out the coordinates for a polygon that you want to draw. We could come over here to our Fargo Plantation, and just start clicking on all the areas where we want a line drawn. So I'm gonna click in the upper left corner, and that gives us a latitude, longitude. I'm gonna click down here. And then you'll notice if you click and drag that it does not add any more click events here. It only adds a click event if you just click and release immediately. So we'll click again here to add another point to our polygon, and then we'll just keep clicking around until we get what we're looking for. And then once all of our corners have been clicked, we then have this nice little map laid out for us in latitude and longitude for what our polygon is going to look like once we create it. We will talk about how to create a polygon in the next lesson. But if you need to create click events for your map, whether or not you're using it in the particular fashion, that's how you would do it. So thank you for watching, and I'll see you in the next lesson.

Back to the top