2

I'm working on a leaflet map application getting data from OpenStreetMap and use the Leaflet plugin Leaflet.contextmenu. I have defined a context menu on the map:

var Map = L.map('Map', {
    zoomControl: false,
    attributionControl: false,
    contextmenu: true,
    contextmenuWidth: 140,
    contextmenuItems: [
        {
            text: 'New ...',
            icon: 'img/pencil.png',
            retinaIcon: 'img/pencil_@2.png',
            callback: newFeatureOnMap
        }, {
            separator: true,
        }, {
            text: 'Address',
            icon: 'img/address.png',
            retinaIcon: 'img/address_@2.png',
            callback: showAddress
        }]
}).setView([51.0, 9.9], 6);

Additionally I declare a second context menu on markers on a L.geoJSON layer definition:

function createLayer (geoJsonData, networkName) {
    return L.geoJSON(geoJsonData, {

        filter: function (feature, layer) {
            return (checkAtmNetwork(networkName, feature));
        },

        pointToLayer: function (feature, latlng) {

            return L.marker(latlng, {
                    icon: L.AwesomeMarkers.icon(
                        {
                            icon: feature.properties.tags.amenity === 'bank' ? 'institution' : 'euro',
                            prefix: 'fa',
                            markerColor: MARKER_COLOR[networkName]
                        }),
                    contextmenu: true,
                    contextmenuInheritItems: false,
                    contextmenuItems: [{
                        text: 'Edit ...',
                        icon: 'img/pencil.png',
                        retinaIcon: 'img/pencil_@2.png',
                        callback: editFeature
                    }, {
                        text: 'Delete',
                        icon: 'img/trash.png',
                        retinaIcon: 'img/trash_@2.png',
                        callback: deleteFeature
                    },
                        {
                        separator: true
                    }, {
                        text: 'Route',
                        icon: 'img/route.png',
                        retinaIcon: 'img/route_@2.png'
                        callback: routeToFeature
                    }]
                }
            );

        },
   });

Both context menus work independent as they should do. But, if I move the map quite often (on moveend event the layers a completely removed from the map and newly loaded and created), sometimes the context menu of the markers are doubled in the DOM and a right click on marker produces the error:

leaflet.contextmenu.js:548 Uncaught TypeError: Cannot read property 'contextmenu' of null
    at e._hideContextMenu (leaflet.contextmenu.js:548)
    at e.fire (leaflet.js:5)
    at e._hide (leaflet.contextmenu.js:393)
    at HTMLAnchorElement.<anonymous> (leaflet.contextmenu.js:324)
    at HTMLAnchorElement.h (leaflet.js:6)

The context menu on markers won't work any more, and on the map is shown the marker context menu, but not working too. The map context menu is not shown any more.

May be, there are problems with the life-cycle of the marker layer on moving the map and reloading the data...

Has anyone an idea what's going wrong?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.