I am getting the above error on my HTML file @ line number 22. I tried several attempts and was unable to resolve it.

Here is the HTML code:

<!DOCTYPE html>
<html lang="en">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,minimal-ui">
        <!-- loading the stylesheet for the application -->
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <!-- loading the style fro the OpenLayers --> <!-- versions of OpenLayers can be downloaded from the OpenLayers website --><!-- this is version 2 of OpenLayers being used  -->
        <link rel="stylesheet" type="text/css" href="OpenLayers/theme/default/style.css"/>
        <!-- loading the OpenLayers javaScript file -->
        <script src="OpenLayers/OpenLayers.js"></script>
        <!-- the div holding the map -->
        <div id="map">
            <!-- loading the javaScript file containing the properties of the map -->
            <script type="text/javascript" src="web-map.js"></script>

The .js code looks like this

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

/*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")},
        //maxResolution: 156543.0339,
        {units: 'm'},
        {allOverlays: true} /*all other data added will overlay on the basemap*/
function init (){
 //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 Boundary = new OpenLayers.Layer.WMS (
        {layers:":Boundary",transparent: true, EPSG:4326, format: "image/gif"},
        {visibility: true},

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

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

 var Parcels = new OpenLayers.Layer.WMS (
        {layers:":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);

var zoom = 5;
        //var map;
        var infoControls;
        var highlightlayer;
        var aktLayer=-1;
        // pink tile avoidance
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
        // make OL compute scale according to WMS spec
        OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

        infoControls = {
            click: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8080/geoserver/Karibib/wms',
                title: 'Identify features by clicking',
                layers: [Boundary,Ext_Boundaries,Erv,Parcels],
                queryVisible: true,
                eventListeners: {
                    getfeatureinfo: function(event) {
                        map.addPopup(new OpenLayers.Popup.FramedCloud(
            hover: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8080/geoserver/wms',
                title: 'Identify features by clicking',
                layers: [Boundary,Ext,Erv,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
  • 2
    You call in the HTML a function init() that doesn't exist in your JS: <body onLoad="init()"> – Léo M Oct 8 at 10:29
  • You need to define this function: function populateLayer(e){ ...write your function here ... } – Léo M Oct 8 at 10:58
  • I found the source where your code is coming from: khayer.wordpress.com/category/gis/openlayer. Unluckily function definition for populatelayer is also missing there. Just comment it out or delete this line. – TomazicM Oct 8 at 11:09
  • Yes, that is right, I did comment it out and nothing happens. My map is showing perfectly, the layers and can zoom in and out. I have integrated the get feature info code by Khayer, configured the proxy in Geoserver and nothing happens when I click on the map? – Amelia Nicodemus Oct 8 at 11:30
  • 1
    Sorry, I've ever used only 5.x versions of OpenLayers and so I can't help you here. – TomazicM Oct 8 at 14:51

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.