We can add information to the objects we draw in/on our map layers1 In the previous version we created three objects named "circle," "polygon," and "marker." Each of these has a method that allows us to bind popup functionality and text (even in HTML)

marker.bindPopup("<h4>Marker Info</h4>Here is all you need to know.").openPopup();
circle.bindPopup("This object is a red circle.");
polygon.bindPopup("This polygon has several vertices.");
++++ My Leaflet GIS Work
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map { height: 300px; width: 800px;  background-color: black; margin: auto;}
</style>
</head>

<body>
<h3>Version 0.8</h3>

<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);

 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: 'Map data &copy; <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/"> CC-BY-SA </a>, Imagery <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors',
     maxZoom: 18
 }).addTo(map);

var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);

marker.bindPopup("<h4>Marker Info</h4>Here is all you need to know.").openPopup();
circle.bindPopup("This object is a red circle.");
polygon.bindPopup("This polygon has several vertices.");

</script>

</body>

My Leaflet GIS Work