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.

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 sth 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>
share|improve this question

3 Answers 3

up vote 1 down vote accepted

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.

share|improve this answer
    
That's not my code. It's the code of the preview page in GeoServer which works fine. –  YossBen Apr 10 '12 at 10:36
    
indeed, but it indicates what your problem is. –  iant Apr 10 '12 at 10:37
    
U mean I must specify in my code the convenient bounds, projection, etc. ?? –  YossBen Apr 10 '12 at 10:57
    
I mean that you need to add your data to GeoServer correctly before anything else will work properly. –  iant Apr 10 '12 at 11:22
    
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.. –  YossBen Apr 10 '12 at 12:36

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.

share|improve this answer
    
I've tried that. still not working –  YossBen Apr 10 '12 at 10:37

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.

share|improve this answer
    
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? –  YossBen Apr 9 '12 at 12:17
    
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 ? –  ysf Apr 9 '12 at 12:43
    
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.. –  YossBen Apr 9 '12 at 12:47
    
post the code of ur preview page! –  ysf Apr 9 '12 at 12:49
    
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. –  EricSonaron Apr 9 '12 at 13:16

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.