Leaflet.js Essentials

Pop ups

The last few examples introduced pop ups. A pop up provides a way to make your layers interactive or provides information to the user. The simplest way to add a pop up to a marker, polyline, or polygon is to use the bindPopup() method. This method takes the contents of the pop up as a parameter. Using the marker variable we created earlier, we bind the pop up to it with the following code:

marker.bindPopup("I am a marker");

The bindPopup() method allows you to enter HTML as the content. This is shown in the following code:

marker.bindPopup("<h1>My Marker</h1><p>This is information about the marker</p><ul><li>Info 1</li><li>Info 2</li><li>Info 3</li></ul>")

The ability to use HTML in a pop up comes in handy when you have a lot of details to ...