Hallo I am trying to create a Web Map servise using Openlayers and Geoserver. I want Open Street Map (OSM) as back ground and that both vagar_alla and adresspt layers to be tranparent, so that it will be possible both layers at the same time. I have the following code sofar. The problem is I OSM layer appears only at the begining zoom-in it disappears AND the top most layer obscures the other layers beneath. Any help?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://www.openlayers.org/dev/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
function init() {
var map = new OpenLayers.Map({
div: "map",
allOverlays: true
});
vagar_alla = new OpenLayers.Layer.WMS(
"vagar_alla", "http://localhost:8000/geoserver/myProject/wms",
{
height: '489',
width: '512',
layers: 'myLumaLundProject:vagar_alla',
styles: '',
srs: 'ESPG:3006',
format: 'image/png',
tiled: 'true',
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},
{
buffer: 0,
displayOutsideMaxExtent: true
}
);
adresspt = new OpenLayers.Layer.WMS(
"adresspt", "http://localhost:8000/geoserver/myProject/wms",
{
height: '512',
width: '458',
layers: 'myLumaLundProject:adresspt',
styles: '',
srs: 'ESPG:3006',
format: 'image/png',
tiled: 'true',
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},
{
buffer: 0,
displayOutsideMaxExtent: true
}
);
var osm = new OpenLayers.Layer.OSM();
map.addLayers([osm,vagar_alla,adresspt]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.Scale(('scale')));
map.addControl(new OpenLayers.Control.MousePosition({element: 'location'}));
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
Lund Map
<br><br>
<div id="map">
</div>
<br>
<div id="wrapper">
<div id="location">location</div>
<br>
<div id="scale">
</div>
</div>
<br>
<div id="nodelist" >
--> Click on the map to get feature info
</div>
</body>
</html>
Best Answer
You need to pass
transparent:true
parameter in the both of your WMS services. Further more, you'll have to request the WMS Services to provide output in EPSG:3857, since you want to overlay it over OSM.Hence you will add both the services like this: