Leaflet Contextmenu to pass a marker reference when executing a callback function - Javascript Leaflet

Javascript examples for Leaflet:Marker

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

Description

Leaflet Contextmenu to pass a marker reference when executing a callback function

Demo Code

ResultView the demo in separate window 

<!doctype html>
<!--/*from   www  .jav a  2 s.  c  om*/
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
   <head> 
      <meta name="description" content="Leaflet Context Menu"> 
      <title>Leaflet Context Menu</title> 
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"> 
      <link rel="stylesheet" href="https://rawgit.com/aratcliffe/Leaflet.contextmenu/master/dist/leaflet.contextmenu.css"> 
   </head> 
   <body> 
      <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div> 
      <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script> 
      <script src="https://rawgit.com/aratcliffe/Leaflet.contextmenu/master/dist/leaflet.contextmenu.js"></script> 
      <script>
var map,
  cm,
  ll = new L.LatLng(-36.79, 174.7),
  ll2 = new L.LatLng(-36.8, 174.7);
map = L.map('map', {
  center: ll,
  zoom: 15,
  contextmenu: true,
  contextmenuWidth: 140
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var circle1 = L.circle(ll, {
  radius: 400,
  weight: 10,
  contextmenu: true,
  contextmenuItems: [{
    text: 'Circle 1',
    callback: function() {
      circleContextClick(circle1);
    }
  }]
}).addTo(map);
var circle2 = L.circle(ll2, {
  radius: 400,
  color: 'gold',
  weight: 10,
  contextmenu: true,
  contextmenuItems: [{
    text: 'Circle 2',
    callback: function() {
      circleContextClick(circle2);
    }
  }]
}).addTo(map);
function circleContextClick(circle) {
  console.log(circle.getLatLng().toString());
}

      </script>  
   </body>
</html>

Related Tutorials