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.4 Adding Circles

In this lesson, we’ll get started with shapes. You’ll learn how to create a circle on your Leaflet map.

Useful Links

2.4 Adding Circles

Hello, and welcome back. In this lesson, we're gonna start taking a look at how to add shapes to our map. More specifically, in this lesson, we're going to create a circle. So let's start by creating a new copy of our work so far. So we're starting in the same place we left off in the last lesson, and you can find the URL for this starting pen in your course notes for this lesson. And once we've opened that up, I'm gonna click on Fork, to create a new copy, and we'll get started with our new copy. So I'm gonna get rid of our marker here, And the pop up associated with it. And I'm gonna create a circle that covers the same area as Stonehenge here. And so the way we do this is very simple, it's very similar to what we've done before. I'm gonna start by creating a variable and I'm just gonna call it circle. And we're gonna set this equal to, and you might have already guessed what this is, L.circle. And then inside our parentheses we're gonna pass in, first of all, a latitude, longitude, a coordinate, and we're gonna be using the same coordinate as our set view here, since our view is centered right over Stonehenge. So we're gonna put our circle right over the center of Stonehenge as well. And then as a second argument, we can enter in the radius and that's gonna be in meters. So I'm gonna try 65 meters here and a semicolon there to end our statement. Now we can add this to our map by pointing to our circle, and then saying .addTo and then in parenthesis the name of our map, the variable name that we used for our map which is mymap, semicolon to end your statement. And there we go, we now have our circle. Now when you create shapes like this, you might find yourself fine-tuning some of these numbers in order to get it perfectly centered. You'll notice it is not perfectly centered over Stonehenge, or at least as it appears on this particular tile. But for our purposes here, it's close enough. But again, you can play with these numbers a little bit if you want to get that centered a little bit better. You can also play with the number here, and remember this number is in meters, and that's the radius of the circle. But when you're working with a circle like this, you can actually pass in more properties. And the way we do that is we're gonna get rid of our second parameter here, the radius. And instead of that, we're gonna put a JavaScript object and we're going to include our radius in this object. So we simply call the first property here radius and then we'll set that equal to 65. We can also alter the colors, so if we were to create a color property here, and this is gonna be inside quotation marks and let's set this equal to red, and when it refreshes we can see that everything is red. There's also a fill color attribute, and it's gonna be fill and then color with a capital C. And we can give it a different color if we want, we can set it to blue, so that the fill is blue and the border is red. We can also change the opacity of that fill by pointing to the fillOpacity property, the O in Opacity is capitalized there, and we could set that to another value, say maybe 0.8. And when it refreshes, there you go. Now we can't see through that very well, so let's bring that down a little bit. We'll try 0.6, looks a little bit better, I'm gonna bring it back down to about 0.4, and that looks pretty good. Now as always, when you're building something like this, you can look into the LeafletJS documentation in order to find other properties and values that you could use here. Now we've talked about doing popups before. We can also add popups to shapes. So we could point to our circle here. And we can bind the pop up to it using the bindPopup method. And then inside parentheses and inside quotation marks we would type in the text we want for our pop up. I'm just going to copy that, And paste it inside our quotation marks. And then at the end, I'm gonna type .openPopup with a capital P, open close parenthesis, semicolon to end our statement, and there we go. So our popup is automatically open by default, and we can open it and close it. Well, we can close it by clicking on the X but we can open it by clicking anywhere in that circle and you'll see that the popup will be centered over wherever we clicked. So those are the basics of creating a simple circle using the LeafletJS framework. Thank you for watching and I'll see you in the next lesson.

Back to the top