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

ismet bahadir ismetbahadir at gmail.com
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?


this is my code


<!DOCTYPE html>
<html lang='en'>
<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',
{layers: 'basic'},

// 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
initialize: function(options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
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
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);



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

and this is popup example:

popup = new OpenLayers.Popup("chicken",

                   new OpenLayers.LonLat(5,40),

                   new OpenLayers.Size(200,200),

                   "example popup",

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

More information about the Dev mailing list