1

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">
    <head>
        <title>Web-Map</title>
        <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>
     </head>
     <body>
        <!-- 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>
        </div>
        </script>
    <head>

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 (
        "Boundary",
        "http://localhost:8080/geoserver/wms",
        {layers:":Boundary",transparent: true, EPSG:4326, format: "image/gif"},
        {visibility: true},
        {'displayInLayerSwitcher':true}
);



 var Ext = new OpenLayers.Layer.WMS (
        "Ext",
        "http://localhost:8080/geoserver/wms",
        {layers:":Ext",transparent: true, EPSG:4326, format: "image/gif"},
        {visibility: false},
        {'displayInLayerSwitcher':true}
);



 var Erv = new OpenLayers.Layer.WMS (
        "Zonning",
        "http://localhost:8080/geoserver/wms",
        {layers:":Erv",transparent: true, EPSG:4326, format: "image/gif"},
        {visibility: false},
        {'displayInLayerSwitcher':true}
);



 var Parcels = new OpenLayers.Layer.WMS (
        "Parcels",
        "http://localhost:8080/geoserver/wms",
        {layers:":Parcels",transparent: true, EPSG:4326, format: "image/gif"},
        {visibility: false},
        {'displayInLayerSwitcher':true}
);



/*adding the data to the map object*/ 

map.addLayers([OSM,Boundary,Ext,Erv,Parcels,]);

/*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,
                infoFormat:'application/vnd.ogc.gml',
                eventListeners: {
                    getfeatureinfo: function(event) {
                        map.addPopup(new OpenLayers.Popup.FramedCloud(
                            "chicken",
                            map.getLonLatFromPixel(event.xy),
                            null,
                            GenPopText(event),
                            null,
                            true
                        ));
                }}
            }),
            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,
                infoFormat:'text/html'
                })

            };

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

            infoControls.click.activate();
            //infoControls.hover.activate();

            // Active layer combo
            populateLayer(0);
        }
        }

        // 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) {

                 highlightLayer.destroyFeatures();
                 highlightLayer.addFeatures(evt.features);
                 highlightLayer.redraw();

                 $('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.