1

My code is this in Openlayers 2

I'm displaying two layers in a single map one with the world map and the other with my node information ..
When I right click(on node layer only) I want to display contextmenu in the openlayers, but I'm getting context menu all over the map.

Someone please help me with the bug. At least help me how to get right click context menu on one layer when there are multiple layer in the map panel.

I used jquery contextmenu (html div element)

<html>
<head>

<title>Layer Tree</title>

<script type="text/javascript"
    src="../resources/ext/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../resources/ext/ext-all.js"></script>

<link rel="stylesheet" type="text/css"
    href="../resources/ext/resources/css/ext-all.css" />

<link rel="stylesheet" type="text/css"
    href="../resources/ext/resources/css/xtheme-green.css" />

<link rel="stylesheet"
    href="../resources/openlayers/theme/default/style.css" type="text/css" />

<link rel="stylesheet" href="../resources/app/theme/style.css"
    type="text/css" />
<link rel="stylesheet"
    href="../resources/geoext/resources/css/gxtheme-green.css" type="text/css" />

<script src="../resources/openlayers/build/OpenLayers.js"></script>

<script src="../resources/geoext/build/GeoExt.js"></script>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.ui.position.js" type="text/javascript"></script>
<script src="jquery.contextMenu.js" type="text/javascript"></script>
<link href="jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script src="jquery.contextMenu.js" type="text/javascript"></script>
<link href="jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<style>
.description {
    position: relative;
}

.content {
    position: relative;
}

#tree-id {
    position: relative;
    left: 0px;
    width: 170px;
    height: 0px;
}

#map-id {
    margin-left: 170px;

    height: 300px;
}
#map-id2 {
    margin-left: 170px;
    height: 400px;
}

#tbar-id {
    margin-center: 0px;
}
#
</style>

<script>
    OpenLayers.ImgPath = "../resources/openlayers/img/";

    // the `panel` and `tree` variables are declared here for easy debugging

    var panel, tree, zoom, navigate, measure, toolbar, popup, sync_fdn;

    Ext
                    .onReady(function() {
            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"
});

    var oClick = new OpenLayers.Control.Click({ eventMethods: {
    'rightclick': function (e) {

     alert("hi");
    var lonlat = panel.map.getLonLatFromPixel(e.xy);
 //       var v=panel.map.getLonLatFromViewPortPx(e.xy).transform(MapProj, DispProj);

//      alert(v);
    alert("You clicked near " + lonlat.lat + " N, " + +lonlat.lon + " E");
    alert(e.xy.x);
    alert(e.arguments);



    var choice = confirm('Do you want to initiate alarm sync on this node ?
- ');
                                                            if (choice == true) {

                                                                    callCorbaClient(event);
                                                            }

            //the infotool has already been added to the map so lets use it!  No need to fuff about and do the request ourselves is there?
     // if(String(e.text).contains("fm_gnip_data")){
  if(e.xy.x>650){
      $(function(){
              $.contextMenu({
              selector: '.context-menu-one',
             callback: function(key, options) {
             var m = "clicked: " + key;
             window.console &&console.log(m) || alert(m);
                     },

                items: { "Sync": {name: "Synchronization", icon: "Sync"},
            "Async": {name: "Asynchronization", icon: "cut"},
            "clear": {name: "Clear", icon: "copy"},


            "sep1": "---------",
            "quit": {name: "Quit",icon:"quit"}}});
$('.context-menu-one').on('click', function(e){console.log('clicked', this); })
});

   }
     infoTool.request(e.xy);
    }

    }

 });
                                                            //var vector1=new OpenLayers.Layer.Vector({eventListeners:{'contextmenu':myFunction(event)}});
                                                            var world=new OpenLayers.Layer.WMS(

    "World borders",

    "http://masterservice:8081/geoserver/wms?",

    {

            "transparent" : "true",



            "layers" : "world:borders",

            "format" : "image/png"

    }, {

            "reproject" : "true",dispalyProjection:"true"

    });
                            var node= new OpenLayers.Layer.WMS(

    "FM_Data",

    "http://masterservice:8081/geoserver/wms?",

    {

            "transparent" : "true",

             "handleRightClicks":"true",



            "layers" : "GNIP_Workspace:fm_gnip_data",

            "format" : "image/png"

    }, {

            "reproject" : "true"

    });

                                    panel = new GeoExt.MapPanel(
                                            {

                                                    title : "MapPanel",

                                                    renderTo : "map-id",

                                                    height : 645,

                                                    layers : [world,node

                                                   ],

                                                    center : [ 5000, 5000 ],
                                                    zoom : 2

                                            });
                    panel.map.addControl(oClick);
                                oClick.activate();
                            tree = new Ext.tree.TreePanel({

                                    renderTo : "tree-id",

                                    border : false,

                                    enabled : true,

                                    root : new GeoExt.tree.LayerContainer({

                                            text : "Layers",

                                            layerStore : panel.layers,

                                            leaf : false,

                                            expanded : true

                                    })

                            });

                            // create an action that zooms map to max extent (no map control needed)
                            zoom = new Ext.Action({
                                    text : "Zoom Full",
                                    handler : function() {
                                            panel.map.zoomToMaxExtent();
                                    },
                                    tooltip : "zoom to full extent"
                            });

                            // create an action tied to a navigation control                                navigate = new GeoExt.Action({
                                    text : "Navigate",
                                    control : new OpenLayers.Control.Navigation(),
                                    map : panel.map,
                                    // button options
                                    toggleGroup : "group1", // only one tool can be active in a group
                                    allowDepress : false,
                                    pressed : false,
                                    tooltip : "navigate"
                            });

                            // create an action tied to a measure control
                            measure = new GeoExt.Action({
                                    text : "Measure",
                                    control : new OpenLayers.Control.Measure(
                                                    OpenLayers.Handler.Path, {
                                                            geodesic : true,                                                                eventListeners : {
                                                                    measure
: function(event) {

 var win = new Ext.Window({

    title : "Measure Resuls",

    modal : true,

    width : 180,

    constrain : true,

    bodyStyle : {

            padding : 10

    },

    html : event.measure + " "

                    + event.units

});

win.show();
                                                                    }
                                                            }
                                                    }),
                                    map : panel.map,
                                    // button options
                                    toggleGroup : "group1", // only one tool can be active in a group
                                    allowDepress : false,
                                    tooltip : "measure distance"
                            });

                            // add a toolbar with the above actions as buttons
                            toolbar = new Ext.Toolbar({
                                    renderTo : "tbar-id",
                                    items : [ zoom, "-", navigate, "-", measure ]
                            });




                            // create a control to get feature info from queryable layers
                            var control = new OpenLayers.Control.WMSGetFeatureInfo({
                                    url : "http://masterservice:8081/geoserver/wms",
                                    layers:[node],
                                    queryVisible:true
    });
                            panel.map.addControl(control);
                            control.activate();

                            // register a listener for the getfeatureinfo event on the control
                            control.events
                                            .on({
                                                    getfeatureinfo : function(event) {
                                                            // close existing popup
                                                            if (popup) {
                                                                    popup.destroy();
                                                            }
                                                            popup = new GeoExt.Popup({
                                                                    title :
"Popup",
                                                                    map : panel.map,
                                                                    lonlat : panel.map

    .getLonLatFromPixel(event.xy),
                                                                    width :
250,
                                                                    autoScroll : true,
                                                                    collapsible : true,
                                                                    bodyStyle : {

padding : 5
                                                                    },
                                                                    html : event.text
                                                            });
                                                    popup.show();
                                            alert(event);


            //      map.events.register('contextmenu',menu,myFunction(event),false);

                                            if(String(event.text).contains("fm_gnip_data")){







                                            //      alert("hi");


                                            //      myFunction();











                                                            var choice = confirm('Do you want to initiate alarm sync on this node ? - ');
                                                            if (choice == true) {

                                                                    callCorbaClient(event);
                                                            }


}

}
});
            map.getFeatureInfo({
                    pixel:map.getEventPixel(event),



                    sucess:function(event)
                            {
                            alert("hi");
                            }
                    });



                    });
    function callCorbaClient(event) {

    var eventext = String(event.text);
            var fdn = String(eventext).replace(/\n/g, '').replace(/%/g, '').replace(/#/g, '');

            var url = "http://localhost:8144/FM/AlarmSync?FDN="+fdn;
            var representationOfDesiredState = "";

            var client = new XMLHttpRequest();

            client.open("GET", url, false);

            client.setRequestHeader("Content-Type", "text/plain");
            client.send(representationOfDesiredState);

            if (client.status == 200)
                    alert("Alarm Synchronization Request sent to Corba Client");
            else
                    alert("The request did not succeed!\n\nThe response status was: "
                                    + client.status + " " + client.statusText + ".");
    }
</script>

</head>

<body class="description">

    <h1>
            <center>GNIP</center>
    </h1>

    <div id="tbar-id"></div>
    <div id="tree-id"></div>
    <div id="map-id" class="context-menu-one"></div>


    </div>

</body>

</html>

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.