leaflet context menu sample

HTML

<script src="http://medialize.github.com/jQuery-contextMenu/src/jquery.ui.position.js"></script>
<script src="http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.js"></script>
<link rel="stylesheet" href="http://medialize.github.com/jQuery-contextMenu/src/jquery.contextMenu.css">
<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css">
<!DOCTYPE html>
<html>
<body>

    <div id="map"></div>

</body>
</html>

CSS

html, body{ width:100%; height: 100%, margin:0; padding:0; }
#map { position: fixed; width:100%; height:100%; }

JavaScript

var map = new L.map('map').setView([-60.239811169998916, -239.0625], 13);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

new L.marker([-60.239811169998916, -239.0625]).on('contextmenu', function(e) {

    console.log("menu");

}).addTo(map);


$.contextMenu({
    selector: 'img.leaflet-marker-icon',
    callback: function(key, options) {
        var m = "clicked: " + key;
        console.log(m);
    },
    items: {
        "edit": {
            name: "Edit",
            icon: "edit"
        },
        "cut": {
            name: "Cut",
            icon: "cut"
        },
        "copy": {
            name: "Copy",
            icon: "copy"
        },
        "paste": {
            name: "Paste",
            icon: "paste"
        },
        "delete": {
            name: "Delete",
            icon: "delete"
        },
        "sep1": "---------",
        "quit": {
            name: "Quit",
            icon: "quit"
        }
    }
});

$('img.leaflet-marker-icon').on('click', function(e) {
    alert('clicked');
})