I am trying to get the get feature info and popup to function. Currently, I face the above error. Not sure how to define OSM because all layers were loading fine before I added the getfeature part of the code.

OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
/*specifying the extent of the map*/
var extents = new OpenLayers.Bounds(15.7832786675738, -22.0109820763529, 15.9298137142004, -21.9006676136942); 

/*loading various controls to the map*/
var control, controls = [];

   var map = new OpenLayers.Map("map" /*this map is the div id in the html code*/, {
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.ArgParser(),
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('dropdown-content')}),
            new OpenLayers.Control.MousePosition(),
            //new OpenLayers.Control.ScaleLine(),
            //new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.Zoom(),
            new OpenLayers.Control.KeyboardDefaults()
        maxExtent: extents,
        minExtent: "auto",
        restrictedExtent: extents /*one cannot pan outside the specified extent*/
        {projection: new OpenLayers.Projection("EPSG:900913")}, /*specifying the projection*/
        {displayProjection: new OpenLayers.Projection("EPSG:4326")},
        {units: 'm'},
        {allOverlays: true} /*all other data added will overlay on the basemap*/

 //var google_sat = new OpenLayers.Layer.Google("Google Satellite",{type:google.maps.MapTypeId.SATELLITE,numZoomLevels:40});

 var OSM = new OpenLayers.Layer.OSM("OpenStreetMap");  /*loading the OSM basemap*/

/*loading the overlays from GeoServer.web_map is the workspace name. Loading the layer as a WMS*/

  var Townland_Boundary = new OpenLayers.Layer.WMS (
        "Townland Boundary",
        {layers:"Karibib:Townland_Boundary",transparent: true, EPSG:4326, format: "image/gif"},
        {visibility: true},

 var Extension_Boundaries = new OpenLayers.Layer.WMS (
        {layers:"Karibib:Extension_Boundaries",transparent: true, EPSG:4326, format: "image/gif"},
        {visibility: false},

 var Karibib_Erven = new OpenLayers.Layer.WMS (
        {layers:"Karibib:Karibib_Erven",transparent: true, EPSG:4326, format: "image/gif"},
        {visibility: false},

 var Karibib_Land_Parcels = new OpenLayers.Layer.WMS (
        "Land Parcels",
        {layers:"Karibib:Karibib_Land_Parcels",transparent: true, EPSG:4326, format: "image/gif"},
        {visibility: false},

/*adding the data to the map object*/ 


/*specifying the center of the map and a zoom level of 3*/
map.setCenter(new OpenLayers.LonLat(15.7832786675738,-22.0109820763529),3);

function load() {
        infoControls = {
            click: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8080/geoserver/Karibib/wms',
                title: 'Identify features by clicking',
                layers: [Townland_Boundary,Extension_Boundaries,Karibib_Erven,Karibib_Land_Parcels],
                queryVisible: true,
                eventListeners: {
                    getfeatureinfo: function(event) {
                        map.addPopup(new OpenLayers.Popup.FramedCloud(
            hover: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8080/geoserver/Karibib/wms',
                title: 'Identify features by clicking',
                layers: [Townland_Boundary,Extension_Boundaries,Karibib_Erven,Karibib_Land_Parcels],
                hover: true,
                // defining a custom format options here
                formatOptions: {
                    typeName: 'water_bodies',
                    featureNS: 'http://www.openplans.org/topp'
                queryVisible: true,


            for (var i in infoControls) {
                infoControls[i].events.register("getfeatureinfo", this, showInfo);


            // Active layer combo

        // sets the HTML provided into the nodelist element
        function setHTML(response){
            document.getElementById('nodelist').innerHTML = response.responseText;

        function errorHTML(response)
            alert("req erro:" + response.responseText);

        function showInfo(evt) {
            if (evt.features && evt.features.length) {


                 $('nodelist').innerHTML = GenPopText(evt);

            } else {
                $('nodelist').innerHTML = evt.text;

        function GenPopText(evt){
                 var temstr="<b><i>" + evt.features[0].gml.featureType + "</i></b><br/>";
                 for(var key in evt.features[0].attributes)
                    temstr += "<b>" + key + "</b>:" + evt.features[0].attributes[key] + "<br/>";
                 return temstr
  • 1
    OSM is defined inside function load() but you are trying to use it outside. Are you even calling load() ? – Mike Oct 6 '19 at 17:52

According to the documentation, there's no property eventListeners for a OpenLayers.Control.WMSGetFeatureInfo, it should be called simply events.


  • It inherits from OpenLayers.Control – Mike Oct 6 '19 at 17:55
  • ah yes indeed, I'm not used to OL2 anymore ... your comment about the OSM variable is probably it. – Léo M Oct 6 '19 at 18:01
  • 1
    don't pay attention to the documentation, it was a mistake from my part. Try to put the two last lines of your code at the end of the load() function just after map.zoomToMaxExtent() and after the function closes, call it by writing load() – Léo M Oct 6 '19 at 18:26
  • That worked, now the map is loading fine. My next challenge is there is no popup and the get feature info does not work at all. Perhaps I am missing something? – Amelia Nicodemus Oct 6 '19 at 18:36
  • do you have any error in the console ? can you check what is returned in the event variable ? – Léo M Oct 6 '19 at 20:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.