[GIS] Layer overlay problem in Openlayers /Geoserver

geoserveropenlayers-2wms

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:

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:3857',
                    format: 'image/png',
                    transparent:true,
                    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:3857',
        format: 'image/png',
        tiled: 'true',
        transparent:true,
        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom           
    },
    {
        buffer: 0,
        displayOutsideMaxExtent: true
    } 
);
Related Question