1

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?

Improve this question
1
  • What do you by Layer does not show? Do you see any empty tiles in firebug/developer tools?
    – Devdatta Tengshe
    Mar 1, 2014 at 4:53

1 Answer 1

Reset to default
3

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
        }
    );
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.