Right Click on Feature Vector (Javascript) in Open Layer

Question

I need to create a contextmenu on right clicking on a Vector Feature (Open Layer) in javascript language. I have searched on forums, but the solutions only regard the way to open alert or popup with right cliking on a Map. Thanks for any help.

Answer 1

This answer was really helpful: https://gis.stackexchange.com/questions/24999/showing-menu-based-on-right-click-on-point-geometry-in-javascript

For my working example, I started with this OpenLayers example: http://openlayers.org/dev/examples/feature-events.html . I then modified the feature-events.js file to the following code below. The key part is the added map.div.oncontextmenu section at the very bottom. I captured the feature clicked on using the right-mouse button and then built a very simple popup menu. That's where you can grab the feature ID and do what you want as far as building up the popup. It also only seemed to work on one vector layer, so I got rid of layer2 from the example. Using code from http://openlayers.org/dev/examples/select-feature-multilayer.html might solve that issue.

Code

var layerListeners = {
featureclick: function(e) {
    log(e.object.name + " says: " + e.feature.id + " clicked.");
    return false;
},
nofeatureclick: function(e) {
    log(e.object.name + " says: No feature clicked.");
}
};

var style = new OpenLayers.StyleMap({
'default': OpenLayers.Util.applyDefaults(
    {label: "${l}", pointRadius: 10},
    OpenLayers.Feature.Vector.style["default"]
),
'select': OpenLayers.Util.applyDefaults(
    {pointRadius: 10},
    OpenLayers.Feature.Vector.style.select
)
});
var layer1 = new OpenLayers.Layer.Vector("Layer 1", {
styleMap: style,
eventListeners: layerListeners
});
layer1.addFeatures([
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 -1)"), {l:1}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 1)"), {l:1}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 1)"), {l:2}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 -1)"), {l:2})
]);
/*var layer2 = new OpenLayers.Layer.Vector("Layer 2", {
styleMap: style,
eventListeners: layerListeners
});
layer2.addFeatures([
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 1)"), {l:2}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 -1)"), {l:2})
]);*/

var map = new OpenLayers.Map({
div: "map",
allOverlays: true,
layers: [layer1],
zoom: 6,
center: [0, 0],
eventListeners: {
    featureover: function(e) {
        e.feature.renderIntent = "select";
        e.feature.layer.drawFeature(e.feature);
        log("Map says: Pointer entered " + e.feature.id + " on " +     e.feature.layer.name);
    },
    featureout: function(e) {
        e.feature.renderIntent = "default";
        e.feature.layer.drawFeature(e.feature);
        log("Map says: Pointer left " + e.feature.id + " on " + e.feature.layer.name);
    },
    featureclick: function(e) {
        log("Map says: " + e.feature.id + " clicked on " + e.feature.layer.name);
    }
}
});

function log(msg) {
if (!log.timer) {
    result.innerHTML = "";
    log.timer = window.setTimeout(function() {delete log.timer;}, 100);
}
result.innerHTML += msg + "<br>";
}

map.div.oncontextmenu = function noContextMenu(e) {
if(!e){ //dear IE...
    var e = window.event;
    e.returnValue = false;
}

console.log(e);

var f = layer1.getFeatureFromEvent(e);
console.log(f);

var popup = new OpenLayers.Popup("My Popup", 
        new OpenLayers.LonLat(f.geometry.x,f.geometry.y), 
        new OpenLayers.Size(200,200),true);

popup.closeOnMove = true;

map.addPopup(popup);

return false; //Prevent display of browser context menu
}