get click location from custom event handler Leaflet - Javascript Leaflet

Javascript examples for Leaflet:Event

  1. HOME
  2. Javascript
  3. Leaflet
  4. Event

Description

get click location from custom event handler Leaflet

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//w ww  .  j  a  va  2 s.  c  o  m
L.CtrlClickHandler = L.Handler.extend({
  addHooks: function() {
    L.DomEvent.on(document, 'click', this._captureClick, this);
  },
  removeHooks: function() {
    L.DomEvent.off(document, 'click', this._captureClick, this);
  },
  _captureClick: function(event) {
    if (event.ctrlKey) {
      var latlng = map.mouseEventToLatLng(event);
      console.log('Handler detected CTRL + click at ' + latlng);
    }
  }
});
L.Map.addInitHook('addHandler', 'ctrlClick', L.CtrlClickHandler);
var map = L.map('mapid', {
  ctrlClick: true
}).setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
map.on('click', function(e) {
  if (e.originalEvent.ctrlKey) {
    console.log('CTRL + click at ' + e.latlng);
  }
});
    }

      </script> 
   </head> 
   <body> 
      <div id="mapid" style="width: 600px; height: 400px;"></div>  
   </body>
</html>

Related Tutorials