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.3 Leaflet Markers and Tooltips

Now that you have your first map in place, in this lesson you will learn how to create a simple marker for your map as well as a tooltip that will pop up over your marker.

Useful Links

2.3 Leaflet Markers and Tooltips

Hello and welcome back. In this lesson we're gonna take a look at how to create a marker and a tool tip for our maps in Leaflet. Now, a marker is basically just what it sounds like, it's a little pointer that we can place anywhere on our map. And we're gonna place it using the same type of coordinate system that we used to set the view of the map. If you remember, we used the set view method in Leaflet to tell our map what location we wanted to look at. And we passed in these latitude and longitude coordinates to do that. And since our latitude and longitude are conveniently centered over Stonehenge here, we can use these same coordinates to create our marker. And then we're gonna add a tooltip to that marker so that we can put a little pop up over the marker that has some text on it. So again we're gonna create the marker first. But before we do that, let's fork this and create a new copy of it. Now, you can get the URL for this starting code pen here in the course notes for this lesson. And once you open that up, if we click on fork, we can open up a new copy and we'll start with this new copy. So in order to create a marker, we can store this in a variable if we want to, or we can just say L.marker, just like we've done before with L.map or L.tilelayer, we're gonna do the same thing with L.marker. And we'll start in a variable for a moment. First of all, I just wanna show you that it works without the variable. So we're gonna create a marker here, we need a parentheses, and then inside the parentheses, we need a set of square brackets, where we're gonna place our coordinates. And I'm gonna use the same coordinates we used up here for our map. I'll just copy those and paste them inside our marker. And then we need to add this marker to the map. So the way we do that is we simply say, .addTo(mymap), the same way we did our tile layer earlier. So once we do that, we can now see a marker is hovering over our location here, our landmark. And we can zoom out as far as we want to and we can still see that marker there, it's still easy to find. So if you wanted, you could start off zoomed out and then let your user zoom in based on where your marker is. But it's that easy to do. Now, again, as I mentioned, we could do this with a variable. I'll just call this shMarker for Stonehenge marker. And we'll set it equal to that, and then we can point to shMarker.addTo(mymap). And so we're doing the same thing here with two lines of code that we did with one line of code earlier. But as you can see, it achieves the same result. Now, there's no need to have this on two separate lines. I'm gonna leave the variable there but I am going to append this .addTo to the end of our first line and again it shows the same result. So now let's say we wanted to bind a pop up or a tooltip to this marker. Well, there's a method in Leaflet called bind pop up and it does exactly that. It creates a tool tip that pops up over our marker, and we add some text, we can add some HTML to this tooltip. So we can go down to the next line here. We can point to our marker, SH marker, and then we could do a ., and then the method name is bindPopup with a capital P. And then inside the parenthesis for our pop-up we're gonna have a string and this can be a plain string or it can includes some HTML as well for the tooltip that's going to pop up over our marker. So I'm gonna copy some HTML that I've got, and I'm gonna paste it inside of our parentheses. And again you'll notice this HTML is all inside quotation marks. It needs to be in the form of a string, so again make sure you include those quotation marks there. And then you'll notice that I am including some HTML in here. But one thing you'll also notice is that this tooltip is not showing up and the reason it's not showing up is because we haven't told our map to open it. Now, if we click on our marker, there we go. Now, you can see that tool tip pop up but by default, it's not going to pop up unless we explicitly tell it to. And the way we explicitly tell it to, is we simply type at the end of our statement here, .openPopup() with a capital P, open and closed parentheses. And now we see when the page refreshes that our tool tip is automatically popped up. And we can click on this x here to get rid of it. And we can always click on the marker again to see that pop up. So again, if you don't want that text to be there by default, simply don't include this .open pop-up. Now, what if we wanted to take this a little bit further? What if we wanted to customize the CSS? Let's say we wanted our text centered within this pop-up. Well, in order to do that, we need to know what we're targeting here in our CSS. So I'm gonna right-click on the title here that says Stonehenge, and I'm going to inspect that element. And in Chrome's Developer tools here we can see this element is inside the a div with a class of leaflet-popup-content. And you'll see that's inside of a div with a class of leaflet-popup-content-wrapper and that's inside of a div with a class of leaflet-popup. So lets target this leaflet-popup-content class. I'm just gonna highlight that and copy it. And then let's close our developer tools. Go into our CSS, and I'm gonna say dot ., and then paste that class name, leaflet-popup-content, and then we can simply set our text-align to center. And when the page refreshes, you can see that the text is now centered. So that's how you can create a simple marker and a tooltip that will pop up over your marker to give your users more information. So thank you for watching, and I'll see you in the next lesson.

Back to the top