[GIS] Problem Overlaying layers in OpenLayers

coordinate systemgeoserveropenlayers-2wms

I have a html page with 2 WMS layers.
The first is one Base Layer , & the second is my personal WMS feature. I load it from Geoserver. The problem when I add the 2 layers I do not have the superposition

The problem is maybe on the projection. please can you help me this is my code 

<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
  var map;
        OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
        var host = "http://'my_host':8080/geoserver/wms";

        function init() {

            map = new OpenLayers.Map('map', {
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
                        new OpenLayers.Control.ScaleLine(),                    
                        new OpenLayers.Control.MousePosition()]});

            var reg = new OpenLayers.Layer.WMS(
                "Région",
                host,
                {layers: 'cite:matregion_view', format: 'image/gif',transparent: true}
            );


               var gmap = new OpenLayers.Layer.Google(
                "Google Streets", // the default
                {numZoomLevels: 20}
            );   

 map.addLayers([gmap , reg]);
//map.setCenter(new OpenLayers.LonLat(146.7, -41.8), 6);
        map.zoomToExtent(new OpenLayers.Bounds(-16.884,20.748,-1.026,35.924));

        }

Image

Best Answer

To overlay the custom WMS layer correctly, I would first set the projection of the map, by passing in the projection parameter, and then at the end I would set the bounds in this projection.

My code would be as follows:

function init() {

var webMercator=new OpenLayers.Projection("EPSG:3857");
var wgs84=new OpenLayers.Projection("EPSG:4326");

var options = {
    projection:webMercator ,
    units: "m",
    maxResolution: 156543.0339,
    maxExtent:max_Extent ,
    controls: [new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
        new OpenLayers.Control.ScaleLine(),                    
        new OpenLayers.Control.MousePosition()]    
    };

map = new OpenLayers.Map('map', options );

var reg = new OpenLayers.Layer.WMS(
    "Région", host,
    {layers: 'cite:matregion_view', format: 'image/gif',transparent: true},
    {isBaseLayer:false}
);


var gmap = new OpenLayers.Layer.Google(
    "Google Streets", // the default
    {numZoomLevels: 20}
);   

map.addLayers([gmap , reg]);
var initialBounds=(new OpenLayers.Bounds(-16.884,20.748,-1.026,35.924)).transform(wgs84, webMercator);

map.zoomToExtent(initialBounds);

        }
Related Question