[GIS] Leaflet geoJSON contextmenu

geojsonleaflet

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

I have created this fiddle to demonstrate http://jsfiddle.net/Q3L4c/22/

Best Answer

The event management for Leaflet and jQuery for this use case seems to conflict.

Instead of struggling with debugging, you should better use an alternate solution like this contextMenu dedicated lib for Leaflet.

Related Question