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.6 Adding Polygons

In this lesson, we’ll use the coordinates we acquired while we were learning about click events in order to create a polygon that we will then add to our map.

Useful Links

2.6 Adding Polygons

Hello, and welcome back. In our last lesson, we created a click event that allowed us to determine the latitude and longitude for wherever we clicked on the map. And we logged those values to the console, so that we could determine how to create a polygon. Now in this lesson, we're gonna learn how to create an actual polygon and add it to our leaflet map. And we're gonna do that using the coordinates that we came up with. So again, we've got Stonehenge here. And just north and west of Stonehenge we find this Fargo Plantation. And with our click event here, we clicked all around the border of this Fargo Plantation to come up with a set of coordinates to use for this polygon that we're going to be creating. So let's talk about how to create that polygon. So you can find the starting URL for our code pen here in the course notes for this lesson. Once you've opened that up, I'm gonna click on fork to create a new copy and all of our changes will be saved in this new copy. So, at the very bottom of our JavaScript, I'm gonna skip a couple of lines and we're gonna create our polygon. Now this polygon is for again, the Fargo Plantation, so I'm gonna store it in a variable called fargo. And the way we create a polygon is with L.polygon. So again very similar to the way we’ve created other items using Leaflet, and then inside parentheses we can pass a couple of things. The first thing we need is an array of coordinates, and then after that array of coordinates we can pass in some values, some properties if we want to. So again, these coordinates need to be stored inside an array, so we're gonna create an array using square brackets here, and then remember each individual coordinate is an array, with a latitude and longitude in it. So I've clicked around on the map on my own, and come up with my own set of latitude and longitude coordinates for the Fargo plantation here. So I'm just going to place those here in our polygon, like so. And when we do this if we scroll over, you'll see there's still nothing there. And we'll get to that soon. We can go ahead and do a .addTo at the very end of it. And we're gonna add it to mymap, semicoloned in that statement. And now you'll see that it has been added to the map with some default properties applied to it. It's got a blue border and a blue fill, and it looks pretty good. But one thing you wanna keep in mind is that as you're clicking around, determining what your coordinates are, make sure that you go in order and that you list these coordinates in the same order here as you did when you were clicking on them. So make sure you keep those coordinates in the same order, or your shape might get a little bit messed up, because it creates each point in the order that you put them on here. Now another thing I do wanna point out, make sure that you pay close attention to this. Remember, and I’ve already mentioned this before, but this is an array of arrays. So we’ve got again, each coordinate is an array with a latitude and a longitude in it. So we have five of those in this particular polygon, but then all five of those arrays are stored in this outer array here. So there's our opening square bracket for that outer array. The very top, and here's our closing square bracket for our outer array down here at the bottom. Now if we wanted to add more properties, we would simply do this after this outer array here. So after this closing square bracket we would say, comma space, and then we'll put a JavaScript object here. And then we can add whatever properties we want to. So if we wanted to change it to a red polygon, then when the map refreshes we can move up and to the left and we can see that it is now red. And as always, you can jump back to the documentation for polygons and find out what other properties are available to you. But those again are the basics of creating a simple polygon. And if we wanted to we could add another pop-up to it. So lets just copy this circle.find pop-up here. And let's paste it down here, but instead of adding it to our circle, we're gonna add it to Fargo, and we're gonna change the text inside it. And we're just gonna say Fargo Plantation. Now, in this particular instance we don't really need to do that, because it already says Fargo Plantation on the map. But I just wanted to do that to show you that it can be done. Also, you can zoom out and you can see it from a little further away. So that's nice if there's a particular area of your map you wanna highlight from any distance. So as you can see, adding these polygons are really easy. The real trick is just figuring out what the coordinates are. If you don't already have the coordinates, then you can use the click event trick that we did before, where we did a console log of the latitude and longitude. Thank you for watching and I'll see you in the next video.

Back to the top