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?

1
  • What do you by Layer does not show? Do you see any empty tiles in firebug/developer tools? Mar 1 '14 at 4:53
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
        }
    );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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