Leaflet Events

Every time something happens in Leaflet, e.g. user clicks on a marker or map zoom changes, the corresponding object sends an event which you can subscribe to with a function. It allows you to react to user interaction. Continuing their quick Start tutorial

<html>
<head>
   <title>Leaflet Events Example</title>
   
   <link rel="stylesheet" href="leaflet/leaflet.css" />
   
   
   <script src="leaflet/leaflet.js"></script>
   
   <script language="javascript">
      var map;
      var popup = L.popup();
         
      function init() {
                       
         map = new L.Map('map');
         popup = new L.Popup();
         
      	 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);
         
         
         map.on('click', onMapClick);
      }
      
      //Listener function taking an event object 
      function onMapClick(e) {
      	 //map click event object (e) has latlng property which is a location at which the click occured.
         popup
           .setLatLng(e.latlng)
           .setContent("You clicked the map at " + e.latlng.toString())
           .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 Events