leaflet geojson contextmenu - contextmenu

Question

I want to add a context menu on right click for various elements on my geojson layer (I'm doing a road map so on a right click on the road at any part I want to show the context menu).
I've managed to get the left click working fine by using the onEachFeature and doing the following
function onEachFeature(feature, layer) {
layer.on({
click: showAssetInfo,
contextmenu: contextreg
});
}
function showAssetInfo(e) {
AssetMouseClick(e.target.feature.properties.objectid, e.latlng);
}
For the context menu I have followed the example here . The context menu library is found here
I have the following that gets called on the document ready (jquery)
$.contextMenu({
selector: 'path.leaflet-clickable',
zIndex: 99999,
callback: function (key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(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" }
}
});
I've tested it and the selector does return the GeoJson features, also if it attach the same menu to something else it works correctly.
Is there something I am missing here?
Also is there a good way to pass in the objectid to the menu when it starts up so I can use it when calling the different options of the menu
EDIT:
I have created this fiddle to demonstrate http://jsfiddle.net/Q3L4c/22/

Answer 1

There is a good leaflet plugin for context menu that was created in Aug 2013:
Leaflet.contextmenu
This context menu library has great documentation including step-by-step instructions for implementation in GeoJSON layers.
In the following code snippet, notice how we can easily pass through the full feature and layer objects to the function that is called when the edit menu item is selected. In this example the layer group is a GeoJSON layer group, the GeoJSON properties can be accessed via feature.properties
NOTE: In this solution content menu item definitions are generated during the onEachFeature processing, not dynamically when the context menu is invoked, just something to be aware of if your were planning on dynamic menu item generation which might be dependent on variables that could change at run time, you need to evaluate the visibility or enabled option for each item as a static value when you create the menu item.
function onEachFeature(feature, layer) {
layer.bindContextMenu({
contextmenu: true,
contextmenuInheritItems: false,
contextmenuItems: [
{ text: 'edit', icon: 'edit', callback: function () { editFeature(feature, layer); } },
{ text: 'cut', icon: cut', callback: function () { console.log('cut'); } },
{ text: 'copy', icon: 'copy', callback: function () { console.log('copy'); } },
{ text: 'paste', icon: 'paste', callback: function () { console.log('paste'); } },
{ text: 'delete', icon: 'delete', callback: function () { console.log('delete'); } },
{ separator: true },
{ text: 'quit', icon: 'quit', callback: function () { console.log('quit'); } },
]
});
layer.on({
click: showAssetInfo
});
}
/**
* Edit a feature on the map
* #param {GeoJSON} feature GeoJSON feature, access metadata through feature.properties
* #param {any} layer Leaflet layer represents this feature on the map (the shape)
*/
function editFeature(feature, layer) {
console.log(JSON.stringify(feature.properties));
}
function showAssetInfo(e) {
AssetMouseClick(e.target.feature.properties.objectid, e.latlng);
}