[OpenLayers-Dev] adding a popup menu to right click

Mon May 7 03:20:35 EDT 2012

Hello All,

i was investigating how to add the popup menu to the right click event. as
of now, i found a code piece so that i can capture the coordinate of right
click. i also found "OpenLayers.Popup" function. however, when i use
""OpenLayers.Popup"" function, the popup appears on top of the map.
instead, i want it to appear at mouse cursor when the user right clicks.

i think i need to combine the right click event with the popup creation but
since i am a total newbie with coding, i cannot do it. can anyone help me?

thanks.

this is my code

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>ismetb map</title>
<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript'>

var map;

function init() {
map = new OpenLayers.Map('map_element', {});
var wms = new OpenLayers.Layer.WMS(
'OpenLayers WMS',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers: 'basic'},
{}
);

map.addLayer(wms);
if(!map.getCenter()){
map.zoomToMaxExtent();
}
// Get control of the right-click event:
document.getElementById('map_element').oncontextmenu = function(e){
  e = e?e:window.event;
 if (e.preventDefault) e.preventDefault(); // For non-IE browsers.
 else return false; // For IE browsers.
};

// A control class for capturing click events...
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,
{

defaultHandlerOptions: {
'single': true,
'double': true,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
handleRightClicks:true,
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, this.eventMethods, this.handlerOptions
);
},
CLASS_NAME: "OpenLayers.Control.Click"

});

// Add an instance of the Click control that listens to various click
events:
var oClick = new OpenLayers.Control.Click({eventMethods:{
'rightclick': function(e) {
alert('rightclick at '+e.xy.x+','+e.xy.y);
},
//'click': function(e) {
//alert('click at '+e.xy.x+','+e.xy.y);
//},
//'dblclick': function(e) {
//alert('dblclick at '+e.xy.x+','+e.xy.y);
//},
//'dblrightclick': function(e) {
//alert('dblrightclick at '+e.xy.x+','+e.xy.y);
//}
}});
map.addControl(oClick);
oClick.activate();

}

 </script>
</head>

<body onload='init();'>
<div id='map_element' style='width: 400px; height: 400px;'>
</div>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
and this is popup example:

popup = new OpenLayers.Popup("chicken",

                   new OpenLayers.LonLat(5,40),

                   new OpenLayers.Size(200,200),

                   "example popup",
                   true);

map.addPopup(popup);
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-dev/attachments/20120507/5d32d067/attachment.html