Leaflet Popups

The bindPopup method attaches a popup with the specified HTML content to your marker so the popup appears when you click on the object. Continuing their quick Start tutorial

<html>
<head>
   <title>Leaflet Popups Example</title>
   
   <link rel="stylesheet" href="leaflet/leaflet.css" />
   
   
   <script src="leaflet/leaflet.js"></script>
   
   <script language="javascript">
      function init() {
         var map = new L.Map('map');                       
                
      	 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
            maxZoom: 18
         }).addTo(map);
         map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.

var london = new L.LatLng(51.505, -0.09); 
         map.setView(london, 13);
         
         var markerLocation = new L.LatLng(51.5, -0.09);
         var marker = new L.Marker(markerLocation);
         map.addLayer(marker);
         
         var circleLocation = new L.LatLng(51.508, -0.11),
             circleOptions = {
                 color: 'red', 
                 fillColor: '#f03', 
                 fillOpacity: 0.5
             };
             
         var circle = new L.Circle(circleLocation, 500, circleOptions);
         map.addLayer(circle);

var p1 = new L.LatLng(51.509, -0.08),
             p2 = new L.LatLng(51.503, -0.06),
             p3 = new L.LatLng(51.51, -0.047),
             polygonPoints = [p1, p2, p3];
         
         var polygon = new L.Polygon(polygonPoints);
         map.addLayer(polygon);                        
         
         //bind popups to the marker, circle, and polygon
         marker.bindPopup("<b>Hello world!</b><br />I am a popup.")
         circle.bindPopup("I am a circle.");
         polygon.bindPopup("I am a polygon.");
         
         //set up a standalone popup (use a popup as a layer)
         var popup = L.popup()
              .setLatLng([51.5, -0.09])
              .setContent("I am a standalone popup.")
              .openOn(map);

}
   </script>
   
</head>
<body onLoad="javascript:init();">
   <div id="map" style="height: 200px"></div>
   
</body>                                                                                                                          
</html>

view directly

Home
Blog
About
Maps
Other
Contact

Harry Wood

Leaflet Popups