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

Mon May 7 03:49:06 EDT 2012

what i am trying to do by combining right click and popup menu is to add a
menu to my right click event so that there will be two options as "add
point A" and "add point B" in this menu. then, when the user selects either
of them, i will add a marker with the correct letter. (as in google maps)

thanks all in advance,

BR

2012/5/7 ismet bahadir <ismetbahadir at gmail.com>

> 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/deecf8db/attachment.html