Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I’m having trouble with my openlayers code displaying postgis data in geoserver

Why would this line (also PanZoomBar) map.addControl(new OpenLayers.Control.Scale($('scale'))); Produce this error in FF error consol

Scale / PanZoomBar is not a constructor

Also the GetFeatureInfo code is only returning one feature is this because the way I’ve constructed the layers

Please note this is just a template once I’ve worked out all the glitches I’ll be creating a perl script to build this page on the fly each time it loads will be unique based upon how many layers/ VIEWPARAMS the user wishes to view at once.

Thanx Holy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
        <link rel="stylesheet" type="text/css" href="http://localhost:8080/geoserver/openlayers/theme/default/style.css"/>
        <!-- Basic CSS definitions -->
        <style type="text/css">
            /* General settings */
            body {
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: small;
            }
            /* Toolbar styles */
            #toolbar {
                position: relative;
                padding-bottom: 0.5em;
                display: none;
            }

            #toolbar ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            #toolbar ul li {
                float: left;
                padding-right: 1em;
                padding-bottom: 0.5em;
            }

            #toolbar ul li a {
                font-weight: bold;
                font-size: smaller;
                vertical-align: middle;
                color: black;
                text-decoration: none;
            }

            #toolbar ul li a:hover {
                text-decoration: underline;
            }

            #toolbar ul li * {
                vertical-align: middle;
            }

            /* The map and the location bar */
            #map {
                clear: both;
                position: relative;
                width: 512px;
                height: 430px;
                border: 1px solid black;
            }

            #wrapper {
                width: 512px;
            }

            #location {
                float: right;
            }

            #options {
                position: absolute;
                left: 13px;
                top: 7px;
                z-index: 3000;
            }

            /* Styles used by the default GetFeatureInfo output, added to make IE happy */
            table.featureInfo, table.featureInfo td, table.featureInfo th {
                border: 1px solid #ddd;
                border-collapse: collapse;
                margin: 0;
                padding: 0;
                font-size: 90%;
                padding: .2em .1em;
            }

            table.featureInfo th {
                padding: .2em .2em;
                text-transform: uppercase;
                font-weight: bold;
                background: #eee;
            }

            table.featureInfo td {
                background: #fff;
            }

            table.featureInfo tr.odd td {
                background: #eee;
            }

            table.featureInfo caption {
                text-align: left;
                font-size: 100%;
                font-weight: bold;
                text-transform: uppercase;
                padding: .2em .2em;
            }
        </style>
    <script src="openlayers/OpenLayers.js"></script>
    <script type="text/javascript">
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
            // make OL compute scale according to WMS spec
            OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

        var map;
        function init(){
        format = 'image/png';
            var bounds = new OpenLayers.Bounds(
                    12.52, 51.72,
                    14.4, 54
                );
                var options = {
                    controls: [],
                    //'PanZoomBar', 'Navigation', 'Scale', 'MousePosition'
                    maxExtent: bounds,
                    maxResolution: 0.00365234375,
                    projection: "EPSG:4326",
                    units: 'degrees'
                };
                map = new OpenLayers.Map('map', options);

                //

            var Base = new OpenLayers.Layer.WMS(
                "Land",
                "http://localhost:8080/geoserver/cite/wms",
                {LAYERS: 'cite:land',
                 format: 'image/png',
                 isBaseLayer: true,
/*                 buffer: 0,
                  displayOutsideMaxExtent: true,
                  isBaseLayer: true,*/
                  srsName: 'EPSG:4326',
                  //yx : {'EPSG:4326' : true}
                }
            );

            var L49470 = new OpenLayers.Layer.WMS(
                "49470",
                "http://localhost:8080/geoserver/cite/wms",
                {
                VIEWPARAMS: 'kathy:49470',
                LAYERS: 'cite:Q_Results',
                transparent: 'true',
                isBaseLayer: false
                }
            );


            var L10654 = new OpenLayers.Layer.WMS(
                "10654",
                "http://localhost:8080/geoserver/cite/wms",
                {
                VIEWPARAMS: 'kathy:10654',
                LAYERS: 'cite:Q_Results',
                transparent: 'true',
                isBaseLayer: false
                }
            );


            var L44670 = new OpenLayers.Layer.WMS(
                "44670",
                "http://localhost:8080/geoserver/cite/wms",
                {
                VIEWPARAMS: 'kathy:44670',
                LAYERS: 'cite:Q_Results',
                transparent: 'true',
                isBaseLayer: false
                }
            );
            //var Qbox = new OpenLayers.Format.WKT().read(POLYGON((13.305833 52.547778,13.440556 52.547778,13.440556 52.491389,13.305833 52.491389)));
             var Qbox = new OpenLayers.Layer.WMS(
                "Qbox",
                "http://localhost:8080/geoserver/cite/wms",
                {
                VIEWPARAMS: 'holly:1',
                LAYERS: 'cite:Q_box',
                transparent: 'true',
                isBaseLayer: false
                }
            );


            map.addLayers([Base, L49470, L10654, L44670, Qbox]);
            // build up all controls


                // build up all controls
              map.addControl(new OpenLayers.Control.PanZoomBar({
                    position: new OpenLayers.Pixel(2, 15)
                }));
                map.addControl(new OpenLayers.Control.Navigation());
                map.addControl(new OpenLayers.Control.Scale($('scale')));

                map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
                map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
           //map.addControl(new OpenLayers.Control.LayerSwitcher());

            map.zoomToExtent(
                new OpenLayers.Bounds(12.996, 52.172,13.931, 52.958)
            );


                // support GetFeatureInfo
                map.events.register('click', map, function (e) {
                    document.getElementById('nodelist').innerHTML = "Loading... please wait...";
                    var params = {
                        REQUEST: "GetFeatureInfo",
                        EXCEPTIONS: "application/vnd.ogc.se_xml",
                        BBOX: map.getExtent().toBBOX(),
                        SERVICE: "WMS",
                        INFO_FORMAT: 'text/html',
                        QUERY_LAYERS: map.layers[0,1,2,3].params.LAYERS,
                        FEATURE_COUNT: 50,
                        Viewparams: 'kathy:49470',
                        VIEWPARAMS: 'kathy:10654',
                        VIEWPARAMS: 'kathy:44670',
                        Layers: 'cite:Q_Results',
                        WIDTH: map.size.w,
                        HEIGHT: map.size.h,
                        format: format,
                        styles: map.layers[0].params.STYLES,
                        srs: map.layers[0].params.SRS};

                    // handle the wms 1.3 vs wms 1.1 madness
                    if(map.layers[0].params.VERSION == "1.3.0") {
                        params.version = "1.3.0";
                        params.j = e.xy.x;
                        params.i = e.xy.y;
                    } else {
                        params.version = "1.1.1";
                        params.x = e.xy.x;
                        params.y = e.xy.y;
                    }

                    // merge filters
                    if(map.layers[0].params.CQL_FILTER != null) {
                        params.cql_filter = map.layers[0].params.CQL_FILTER;
                    }
                    if(map.layers[0].params.FILTER != null) {
                        params.filter = map.layers[0].params.FILTER;
                    }
                    if(map.layers[0].params.FEATUREID) {
                        params.featureid = map.layers[0].params.FEATUREID;
                    }
                    OpenLayers.loadURL("http://localhost:8080/geoserver/cite/wms", params, this, setHTML, setHTML);
                    OpenLayers.Event.stop(e);
                });
        }// end init
                // sets the HTML provided into the nodelist element
        function setHTML(response){
            document.getElementById('nodelist').innerHTML = response.responseText;
        };


    </script>
  </head>

  <body onload="init()">
    <h3>OpenLayers PostGis Layers</h3>
    <DIV id=layerswitcher class=olControlLayerSwitcher></DIV>
    <div id="map"></div>
        <div id="wrapper">

        <div id="location">location</div>
        <div id="scale">        </div>
    </div>
    <div id="nodelist">
        <em>Click on the map to get feature info</em>
    </div>
  </body>
</html>
share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

The version of OpenLayers shipped in GeoServer by default is a stripped down version of a quite old release. So change

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

to point to a recent OpenLayers build that you can download from openlayers.org - try not to overwrite the existing version of OpenLayers as this can stop the layer previews from working.

The getFeatureInfo issue is that line:

QUERY_LAYERS: map.layers[0,1,2,3].params.LAYERS,

is wrong. JavaScript arrays don't work that way try something like:

QUERY_LAYERS: map.layers[0].params.LAYERS,map.layers[1].params.LAYERS,map.layers[2].params.LAYERS,
share|improve this answer
    
I'm unable to link to openlayers.org as i'm on a standalone system with no internet connection but i'll download an new version and try it. I'll also try the QUERY_LAYER suggestion are the Viewparams: correctly formated? –  Holly Mar 29 '12 at 16:58
    
You just need to download the OpenLayers zip file and unpack it on your machine. e-education.psu.edu/geog585/l8_p5.html –  iant Mar 30 '12 at 7:37
    
Hi downloading OpenLayers zip fixed the PanZoomBar error. The QUERY_LAYERS: code suggested didn't solve the problem. Clicking on a feature "Loading.." is shown inside the nodelist div but nothing else. –  Holly Mar 30 '12 at 9:16
    
check in firebug to see if your request is being made, - things that might be wrong include opening the page by double clicking the html file instead of typing the full url (starting localhost:8080/... ) into your browser bar. –  iant Mar 30 '12 at 9:22
    
in firebug the request is being made & errors at QUERY_LAYERS: map.layers[0].params.LAYERS,map is undefind. Changing the syntex to [code]QUERY_LAYERS: map.layers[0].params.LAYERS, QUERY_LAYERS: map.layers[1].params.LAYERS,[/code] stops the error but when code gets to OpenLayers.Event.stop(e); it gose into the openlayers.js and stops with no errors & responseText rmains empty –  Holly Mar 30 '12 at 12:20
show 5 more comments

Try using

window.onload=function(){ init(); }

instead of body onload=init(), because window.onload waits until all resources has loaded. Onload triggers when the html (without resources) has loaded.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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