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>
Best Answer
The version of OpenLayers shipped in GeoServer by default is a stripped down version of a quite old release. So change
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:
is wrong. JavaScript arrays don't work that way try something like: