[GIS] Geoserver WMS layer does not show in OpenLayers

geoserveropenlayers-2openstreetmap

I'd like to overlay a Geoserver WMS layer in OpenLayers & OpenStreetMaps. I'm having problems because the wms is not showing on top of the OSM layers (mapnik, cyclemap).
This is the code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Exercise 13 OSM Basemaps</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>

<script>
    var map;

    function init(){
        map = new OpenLayers.Map("map");

        map.addControl(new OpenLayers.Control.LayerSwitcher());

        var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");

        var cycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
        //this is the wms layer addressm when opening in geoserver OL preview:
        //http://gis.otg.pr.gov:8080/geoserver/CENTRAL_GIS_PR/wms?service=WMS&version=1.1.0&request=GetMap&layers=CENTRAL_GIS_PR:AMB_CONSERV_AREAS_NATURALES_PROTEGIDAS_2010&styles=&bbox=-68.11626634304696,17.77573989512554,-65.21874395570885,18.645740062494458&width=1099&height=330&srs=EPSG:4326&format=application/openlayers
//          var mytest = new OpenLayers.Layer.WMS(
//              "Áreas naturales protegidas, 2010",
//              "http://gis.otg.pr.gov:8080/geoserver/CENTRAL_GIS_PR/wms?service=WMS&version=1.1.0",
//                  {
//                      layers: 'CENTRAL_GIS_PR:AMB_CONSERV_AREAS_NATURALES_PROTEGIDAS_2010',
//                      format: 'image/png',
//                      transparent: true
//                  },
//                  {
//                      'opacity': 0.66, 'isBaseLayer': false, 'wrapDateLine': true
//                  }
//          );


        mytest = new OpenLayers.Layer.WMS("Áreas naturales protegidas, 2010", 
            "http://gis.otg.pr.gov:8080/geoserver/CENTRAL_GIS_PR/wms?",
            {
                workspace: 'CENTRAL_GIS_PR',
                layers: 'AMB_CONSERV_AREAS_NATURALES_PROTEGIDAS_2010', 
                format: 'image/png'
            },
            {
                'opacity': 0.66, 'isBaseLayer': false
            }
        );

        map.addLayers([mapnik, cycleMap, mytest]);

        var center = new OpenLayers.LonLat(-66.25, 18.25);

        var centerOSM = center.transform(
            new OpenLayers.Projection("EPSG:4326"),
            new OpenLayers.Projection("EPSG:3857")
        );

        map.setCenter(centerOSM, 8);

    }

</script>

</head>
<body onload="init()">
    <div id="map"></div>
</body>
</html>

Using another code I can see the wms alone:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Exercise OSM Basemaps</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>

<script type="text/javascript">
    var map, layer;

    function init()
    {
        map = new OpenLayers.Map( 'map' );
        // This is the address in geoserver...
        // http://gis.otg.pr.gov:8080/geoserver/CENTRAL_GIS_PR/wms?service=WMS&version=1.1.0&request=GetMap&layers=CENTRAL_GIS_PR:AMB_CONSERV_AREAS_NATURALES_PROTEGIDAS_2010&styles=&bbox=-68.11626634304696,17.77573989512554,-65.21874395570885,18.645740062494458&width=1099&height=330&srs=EPSG:4326&format=application/openlayers
        layer = new OpenLayers.Layer.WMS("Áreas naturales protegidas, 2010", 
            "http://gis.otg.pr.gov:8080/geoserver/CENTRAL_GIS_PR/wms?",
            {
                workspace: 'CENTRAL_GIS_PR',
                layers: 'AMB_CONSERV_AREAS_NATURALES_PROTEGIDAS_2010', 
                format: 'image/png'
            },
            {
                buffer: 0,
                ratio: 1.9,
                displayOutsideMaxExtent: true
            }
        );
        map.addLayer(layer);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
         -68.11626634304696,17.77573989512554,-65.21874395570885,18.645740062494458
        map.zoomToExtent(
            new OpenLayers.Bounds(-68.11,17.77,-65.21,18.64)
        );
    }
</script>
</head>
<body onload="init()">
    <div id="map"></div>
</body>
</html>

What I'm missing here? It seems like projection incompatibilities?

Best Answer

You have to set transparent=true in the first option. It should look like 

mytest = new OpenLayers.Layer.WMS("Áreas naturales protegidas, 2010", 
        "http://gis.otg.pr.gov:8080/geoserver/CENTRAL_GIS_PR/wms?",
        {
            workspace: 'CENTRAL_GIS_PR',
            layers: 'AMB_CONSERV_AREAS_NATURALES_PROTEGIDAS_2010', 
            format: 'image/png',
            transparent : true
        },
        {
            'opacity': 0.66, 'isBaseLayer': false
        }
    );
Related Question