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.

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

1 Answer 1

up vote 1 down vote accepted

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
    } 
);
share|improve this answer
    
Thank you Devdatta, it worked! I have one more question though. because my shapefiles are already in srs:'ESPG:3006' is it possible to transform them in the script without using ArcGIS. coz my ArcGIS has crashed recently :-( –  user19277 Jun 27 '13 at 19:25
    
@user19277: The simplest thing is to change the declared SRS while publishing the map, and selecting 'Reproject native to Declared' in the SRS Handeling. That way, you WMS can be in 3857, while you data itself is in 3006. I would only suggest this, if your data is not very large. Otherwise you can reproject using GDAL or QGis –  Devdatta Tengshe Jun 28 '13 at 3:06
add comment

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.