How to add a WMS layer from GeoServer with OpenLayers?

Question

After doing some basic OpenLayers examples where I used WMS layers from WMS providers like this: http://maps.opengeo.org/geowebcache/service/wms , I wanted then to add a WMS layer from my GeoServer. I tried this but all I get is an empty page:

 map = new OpenLayers.Map('map_element');
 var wms = new OpenLayers.Layer.WMS(
 "Routes_Maroc",
 "http://localhost:8080/geoserver/PFE/wms", 
 {'layers': 'PFE:morocco_highway'},
 {}
 );
 map.addLayers([wms]);
 };

Where PFE is the GeoServer workspace containing the PostGIS layer morocco_highway as in the image below: I couldn't post the image, they told me I need 10 reputation :(

Is there something wrong with the layer parameters in GeoServer or with the code (missing properties in the WMS object)?

Here is the script section of the code of the OpenLayers preview in GeoServer of "morocco_highway" layer:

<script defer="defer" type="text/javascript">
var map;
var untiled;
var tiled;
var pureCoverage = false;
// pink tile avoidance
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
// make OL compute scale according to WMS spec
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
function init(){
// if this is just a coverage or a group of them, disable a few items,
// and default to jpeg format
format = 'image/png';
if(pureCoverage) {
document.getElementById('filterType').disabled = true;
document.getElementById('filter').disabled = true;
document.getElementById('antialiasSelector').disabled = true;
document.getElementById('updateFilterButton').disabled = true;
document.getElementById('resetFilterButton').disabled = true;
document.getElementById('jpeg').selected = true;
format = "image/jpeg";
}
var bounds = new OpenLayers.Bounds(
-12.9576148986816, 27.5776710510254,
-0.976616859436035, 36.0192184448242
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.046800773590803,
projection: "EPSG:900913",
units: 'm'
};
map = new OpenLayers.Map('map', options);
// setup tiled layer
tiled = new OpenLayers.Layer.WMS(
"PFE:morocco_highway - Tiled", "http://localhost:8080/geoserver/PFE/wms",
{
LAYERS: 'PFE:morocco_highway',
STYLES: '',
format: format,
tiled: true,
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:900913' : false}
}
);
// setup single tiled layer
untiled = new OpenLayers.Layer.WMS(
"PFE:morocco_highway - Untiled", "http://localhost:8080/geoserver/PFE/wms",
{
LAYERS: 'PFE:morocco_highway',
STYLES: '',
format: format
},
{
singleTile: true,
ratio: 1,
isBaseLayer: true,
yx : {'EPSG:900913' : false}
}
);
map.addLayers([untiled, tiled]);
// 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.zoomToExtent(bounds);
// wire up the option button
var options = document.getElementById("options");
options.onclick = toggleControlPanel;
// 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].params.LAYERS,
FEATURE_COUNT: 50,
Layers: 'PFE:morocco_highway',
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/PFE/wms", params, this, setHTML, setHTML);
OpenLayers.Event.stop(e);
});
}
// sets the HTML provided into the nodelist element
function setHTML(response){
document.getElementById('nodelist').innerHTML = response.responseText;
};
// shows/hide the control panel
function toggleControlPanel(event){
var toolbar = document.getElementById("toolbar");
if (toolbar.style.display == "none") {
toolbar.style.display = "block";
}
else {
toolbar.style.display = "none";
}
event.stopPropagation();
map.updateSize()
}
// Tiling mode, can be 'tiled' or 'untiled'
function setTileMode(tilingMode){
if (tilingMode == 'tiled') {
untiled.setVisibility(false);
tiled.setVisibility(true);
map.setBaseLayer(tiled);
}
else {
untiled.setVisibility(true);
tiled.setVisibility(false);
map.setBaseLayer(untiled);
}
}
// Transition effect, can be null or 'resize'
function setTransitionMode(transitionEffect){
if (transitionEffect === 'resize') {
tiled.transitionEffect = transitionEffect;
untiled.transitionEffect = transitionEffect;
}
else {
tiled.transitionEffect = null;
untiled.transitionEffect = null;
}
}
// changes the current tile format
function setImageFormat(mime){
// we may be switching format on setup
if(tiled == null)
return;
tiled.mergeNewParams({
format: mime
});
untiled.mergeNewParams({
format: mime
});
/*
var paletteSelector = document.getElementById('paletteSelector')
if (mime == 'image/jpeg') {
paletteSelector.selectedIndex = 0;
setPalette('');
paletteSelector.disabled = true;
}
else {
paletteSelector.disabled = false;
}
*/
}
// sets the chosen WMS version
function setWMSVersion(wmsVersion){
// we may be switching style on setup
if(wmsVersion == null)
return;
if(wmsVersion == "1.3.0") {
origin = map.maxExtent.bottom + ',' + map.maxExtent.left;
} else {
origin = map.maxExtent.left + ',' + map.maxExtent.bottom;
}
tiled.mergeNewParams({
version: wmsVersion,
tilesOrigin : origin
});
untiled.mergeNewParams({
version: wmsVersion
});
}
function setAntialiasMode(mode){
tiled.mergeNewParams({
format_options: 'antialias:' + mode
});
untiled.mergeNewParams({
format_options: 'antialias:' + mode
});
}
function setPalette(mode){
if (mode == '') {
tiled.mergeNewParams({
palette: null
});
untiled.mergeNewParams({
palette: null
});
}
else {
tiled.mergeNewParams({
palette: mode
});
untiled.mergeNewParams({
palette: mode
});
}
}
function setWidth(size){
var mapDiv = document.getElementById('map');
var wrapper = document.getElementById('wrapper');
if (size == "auto") {
// reset back to the default value
mapDiv.style.width = null;
wrapper.style.width = null;
}
else {
mapDiv.style.width = size + "px";
wrapper.style.width = size + "px";
}
// notify OL that we changed the size of the map div
map.updateSize();
}
function setHeight(size){
var mapDiv = document.getElementById('map');
if (size == "auto") {
// reset back to the default value
mapDiv.style.height = null;
}
else {
mapDiv.style.height = size + "px";
}
// notify OL that we changed the size of the map div
map.updateSize();
}
function updateFilter(){
if(pureCoverage)
return;
var filterType = document.getElementById('filterType').value;
var filter = document.getElementById('filter').value;
// by default, reset all filters
var filterParams = {
filter: null,
cql_filter: null,
featureId: null
};
if (OpenLayers.String.trim(filter) != "") {
if (filterType == "cql")
filterParams["cql_filter"] = filter;
if (filterType == "ogc")
filterParams["filter"] = filter;
if (filterType == "fid")
filterParams["featureId"] = filter;
}
// merge the new filter definitions
mergeNewParams(filterParams);
}
function resetFilter() {
if(pureCoverage)
return;
document.getElementById('filter').value = "";
updateFilter();
}
function mergeNewParams(params){
tiled.mergeNewParams(params);
untiled.mergeNewParams(params);
}
</script>

Answer 1

I think that your layer is not set up correctly as

var bounds = new OpenLayers.Bounds(
-12.9576148986816, 27.5776710510254,
-0.976616859436035, 36.0192184448242
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.046800773590803,
projection: "EPSG:900913",
units: 'm'
};

seems wrong - those look like lat/lon values in the bounds object while you have declared the projection of the layer to be Spherical Mercator (900913). This combined with your map making a request for lat/lon data (4326 the default) means that your map is a small dot (probably way smaller than a pixel) near where the meridian crosses the equator.

I think that you would benefit from taking lessons 7 & 8 of my web mapping class.

• YossBen: That's not my code. It's the code of the preview page in GeoServer which works fine.
• Ian Turton: indeed, but it indicates what your problem is.
• YossBen: U mean I must specify in my code the convenient bounds, projection, etc. ??
• Ian Turton: I mean that you need to add your data to GeoServer correctly before anything else will work properly.
• YossBen: ok thanx..But it works in the preview! I am reading a chapter dealing with projections from book "OpenLayers beginner's guide".. if u know other resources please share..

Answer 2

Try the OpenLayers preview for your "morocco-highway" layer in GeoServer. Then take a look at the code of that generated page. It will help you a lot.

• YossBen: Thanx for answering. I've done that, it's there where I got the "localhost:8080/geoserver/PFE/wms". What I don't understand in the code is that they create two layers "morocco_highway-tiled" and "morocco_highway-untiled" What for?
• ysf: Create a new html document where you paste all that code. Then open the page, it should work as if u clicked the preview link in GeosServer. Is that what u did ?
• YossBen: Yes I did that and I got the same page as in the preview. But as soon as I change some details to suit my needs, I get the bloody empty page again..
• ysf: post the code of ur preview page!
• acanimal: Tiled and untiled is simply for performance. Tiles are easy to cache and reuse among request instead of generating the specific image for a BBOX every time it changes.

Answer 3

Try to add use:

map = new OpenLayers.Map('map_element', {
 projection: "EPSG:900913"
);

By default, the map uses EPSG:4326 and your layer seems to be configured to return EPSG:900913.

• YossBen: I've tried that. still not working

Answer 4

Just found solution that worked for me >

Went to geoserver-layers- layer that doesn't show - Declared SRS and put it in EPSG:4326.

Now layer preview in GeoServer doesn't work, but it shows when i open my html project (map + layer). Problem was that wrong projection had my whole layer shown in some small village in DR Congo, that is why it looked like it is not showing in map. Layer was supposed to be over whole country of Serbia.

Can someone show me how to make it show in GeoServer - layer preview?