2.1 What Is Leaflet?

Hello, and welcome back. In this lesson, I wanna talk a little bit about what Leaflet JS is and where you can find more information about it. And you can get to the Leaflet JS website at leafletjs.com. And as you can see here, it is an open-source JavaScript library for mobile-friendly interactive maps. So this basically provides us, if we scroll down a little bit, we can see right away what this is. It gives us fully interactive maps. We can click and drag around. We can use our scroll wheel to zoom in and out, or click on the plus and minus arrows there. We can add tool tips, pop ups, things like that. And again, this is open-source, which means it's free. So it's not like Google Maps where you have to pay for using it. It's very easy to use. And one thing we need to keep in mind is that the Leaflet JS framework does not actually provide the graphics for your map. The graphics are added to what's called a tile layer in leaflet.js, and there are numerous providers out there of these map tiles. You can see in the lower right-hand corner here that this one is called Open Street Map, that's the one we're gonna be using in this course. But there are other tile providers out there that will give you different maps that you can use here. Some of them you have to pay for, some of them like Open Street Map are free to use. And ultimately it'll just come down to what look and feel do you wanna go for, what do you want your maps to look like? So again, we're gonna be focusing on Open Street Map, and, really, what we're gonna focus on is the Leaflet framework itself. As far as the tile layers go, we'll only need to reference it once, and we'll do that in a line of code, like so. And we'll talk about this later on. But again, I just wanted to introduce you to that concept. There are multiple tiles that you can use that give you different looks to your maps. But again, at leafletjs.com, you can get all the information you need, there are tutorials, documents, downloads, and even some plug-ins for it. If you go to the Download section, you can find download links for the files. Or we can scroll down a little bit further and find the hosted versions of Leaflet, which is what we're gonna be using in this course. So we have the style sheet here, and the JavaScript file here. And we're gonna be building all of our sample code using CodePen.io. And so in just a second we'll take a look at how to grab these hosted files and point to them in our CodePen. But one more thing I wanna point out of the Leaflet page or the Leaflet site is the Docs link. This is where you're gonna find all of the detailed information for all the things you can do with Leaflet JS. And this will be your constant reference if you decide to use this framework on a regular basis. So it's got a lot of information there. That's where you're gonna go for your documentation. And now let's go back to our Download link. And I'm gonna grab our CSS file here. I'm gonna copy just the URL, I don't need the whole link tag, just the URL. So I'm gonna copy that, and I'm gonna jump over to CodePen, where I've already created a new pen here. And I'm gonna jump up to my Settings, and I'm gonna save this as a private pen for now. I'm gonna jump over to CSS. And in the first blank field here, I'm just gonna paste that CSS URL. So then I'm gonna jump over to the JavaScript tab. And then we'll jump back over to leaflet.js, I'm sorry, leafletjs.com. And then we'll grab the URL for the JavaScript file, copy that. Go back into CodePen, and we'll paste that JavaScript file here. And then we'll Save and Close. So I'm gonna throw a title on this, and we'll use this particular CodePen as our starting point for all of our Leaflet JS files. So thank you for watching, and we'll get started creating our own interactive maps in the next lesson.