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.2 Creating a Map

In this lesson, I will walk you through the creation of your first Leaflet map using the framework’s straightforward syntax.

Useful Links

2.2 Creating a Map

Hello, and welcome back. In this lesson, I wanna show you everything you need to do to get started creating your own maps using the Leaflet JS framework. So we're starting with the file that we created before where, if we jump into our settings here, we are pointing to the Leaflet CSS file, as well as the Leaflet JavaScript file. And you can find the URL for this starting code pin in your course notes for this lesson. And once you've got that open, we're gonna click on the Fork button to create a new copy of it, and all of the changes will be saved in this new copy. Now, the first thing we need when we're creating a map, is we need a container to put our map in, and this is gonna be a simple div. So I'm gonna create a div here, and I'm gonna give it an id of my nap. And then, we'll close off the div. And that's really all we need for our HTML. The next thing I wanna do is I wanna make sure we give our map a height. So we're gonna point to our map in CSS. And I'm gonna give it a height of, let's say, 400 pixels. Now, our div is still empty, so we can't see anything in that div. But if we jump into our JavaScript, we can then create the code that we need to trigger the Leaflet JS framework, and to look at a particular point on the map. Now, when you're creating a map, you need to know the coordinates that you wanna look at. And these coordinates are going to be stored in an array. And this array is gonna point to two values, our latitude and longitude. And so, let's go ahead and jump into our JavaScript, and let's start by creating a variable for our map. So I'm gonna create a variable. And let's just call it mymap. And the way we create a map using Leaflet is we say capital L, and that's how we're going to start most things in Leaflet JS. Capital L dot map. And then, inside parenthesis, we need to type in the ID of the element that is going to serve as our map. Now here, we don't need the pound sign like we would with a CSS selector. All we need is the ID name inside quotation marks. So we're gonna put mymap inside quotes, and that will create the map. You can see the map pop up on the screen here now. And the next thing we need to do is to set the coordinates. And we could do this one of two ways. We could end this statement and then point to mymap dot. And then, there's a method called set view. And then, inside the parentheses we need two things. We need an array with the latitude and longitude, and then we're also going to pass in a zoom level. So again, first thing we need is an array. And the array is gonna contain an x,y coordinate, or a latitude longitude coordinate. And so, we're gonna start off with 51.1789. And our longitude is gonna be negative 1.8262. Now, these two values here again represent the latitude and longitude. The first value, if it's a positive number, it's gonna be north. If it's a negative number, it's going to be south of the equator. And then, our second number here, the longitude, if it's a negative number, it's gonna be west. If it's a positive number, it's going to be east. So if you're looking for a specific landmark or a specific location, you can do a search for the coordinates of that location online. And again, if the first number, if the latitude number, is North, then we're gonna give it a positive number. If it's South, we're gonna give it a negative number. And for the longitude, if it's negative, it's gonna be West. If it's positive, it will be East. So then, after this array, I'm gonna type a comma. And the next thing I want is the zoom level. So, I'm gonna give it a zoom level of 16. And then, a semi-colon at the end of the statement. Now, as you can see, nothing has changed on our map. We still have this dull grey background. And if you remember, as we talked about in the last lesson, Leaflet JS does not provide it's own graphics for the map. It merely provides the framework for navigating through whatever graphics you decide to use for your map. So I want to jump over to the Leaflet JS website. I'm gonna save my work there and jump over to another tab. Again, you can find the Leaflet website at leafletjs.com. And once you get to the Leaflet JS website, from the main page here, if we scroll down a little bit, we can see some sample code that's using the open street map tile set. A tile set is simply a graphic set for the maps that we're gonna be using. And the tile layer determines what tiles or what graphics we're going to be using. And we're gonna be using this open street map dot org provider. And so, all we need to do to get this to work is just copy this line of code that you find here on the main page of the Leaflet website. So I'm gonna highlight this tile layer code, copy it, jump back into our code, and paste it. And it's not gonna work right away. And the reason for that is because we're pointing to map. And we actually called our map mymap, so we need to make sure we change that so we're pointing to the right object. And now, when our page refreshes, we can see the actual map that we're pointing to. And now, you can see that the coordinates I'm pointing to here, point to Stonehenge. And this map is really easy to use. We can click and drag around just like you would expect on any map like this. We can use our mouse scroll wheel to zoom in and out. Or we can click on the in and out or the plus and minus buttons in the upper-left-hand corner. Again, it's very, very easy to use. You'll notice there is this attribution down here in our tile layer which is what creates this code down here at the bottom. And if you're using open street map, you're required to use an attribution to point to open street map because this is a free service that you're using. Let's take a quick look at the URL here for our tile layer. And you'll see a pattern like this no matter what provider you're using. You'll see, first of all, this little s here in between curly brackets. That's for a subdomain that will be injected into your URL here. You have a z, which is your zoom level. An x and a y, which are your latitude and longitude. And so, these values here inside the curly brackets, those values are how the Leaflet JS framework injects the right values into this URL in order to give us the image or to serve up the images that we need for our map. So that's how you can create a basic map using Leaflet JS. Thank you for watching, and I'll see you in the next lesson.

Back to the top