Overlay WMS on Google in OpenLayers

[Note: therea are related post: overlyaing tiled WMS over the new Google Map v3 http://blog.sumbera.com/2010/11/02/tiled-wms-overlay-on-google-map-v3/ and overlying tiled WMS over the Silverlight Bing map http://blog.sumbera.com/2010/02/25/overlay-wms-on-google-in-silverlight-bing/ ]

Is it possible to display WMS (EPSG:4326) over the Google (EPSG:900913) in Openlayers ? Yes ! thanks to the great img ’feature’ that enables you to shrink/expand your return image based on defined image size. That means that if your map view is rectangular or you request WMS as tiles (rectangular too) you get proper overlay of EPSG:4326 on EPSG:900913) . Example of various image sizes follows (these are actually WMS GetMap requests):

256 x 160

256 x 256

  Here is the way how to implement it in OpenLayers – very simplified:

1. read this post http://docs.openlayers.org/library/spherical_mercator.html and create your Google map:

var options = {
                projection: new OpenLayers.Projection(“EPSG:900913″),
                displayProjection: new OpenLayers.Projection(“EPSG:4326″),
                units: “m”,
                numZoomLevels: 22,
                maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                                 20037508, 20037508.34)
            };
            map = new OpenLayers.Map(‘map’, options);
            // create Google Mercator layers
            var ghyb = new OpenLayers.Layer.Google(
                “Google Hybrid”,
                { type: G_HYBRID_MAP, ‘sphericalMercator’: true }
            ); 

2. add your WMS layer

var gwms = new OpenLayers.Layer.TMS(“SLP”, “http://mapserver-slp.mendelu.cz/cgi-bin/mapserv?map=/var/local/slp/krtinyWMS.map&”,
                                    {
                                     layers: ‘obrys,typologie,hm2003′,
                                     type: ‘png’,
                                     visibility: true,
                                     getURL: get_wms_url,
                                     format: “image/png”,
                                     opacity: 1,
                                     isBaseLayer: false,
                                     deltaX: 0.0013,  
                                     deltaY: 0.00058
                                    });
 

3. include support for reprojection before you include OpenLayers:

<script src =”proj4js/lib/proj4js-combined.js”>script>

4. handle WMS as TMS tiles as this:

function get_wms_url(bounds) {

// recalculate bounds from Google to WGS
   var proj = new OpenLayers.Projection(“EPSG:4326″);
    bounds.transform(map.getProjectionObject(), proj);

// this is not necessary for most servers display overlay correctly,
//but in my case the WMS  has been slightly shifted, so I had to correct this with this delta shift

            bounds.left += this.deltaX;
            bounds.right += this.deltaX;
            bounds.top += this.deltaY;
            bounds.bottom += this.deltaY;

            //construct WMS request

          var url = this.url;
            url += “&REQUEST=GetMap”;
            url += “&SERVICE=WMS”;
            url += “&VERSION=1.1.1″;
            url += “&LAYERS=” + this.layers;
            url += “&FORMAT=” + this.format;
            url += “&TRANSPARENT=TRUE”;
            url += “&SRS=” + “EPSG:4326″;
            url += “&BBOX=” + bounds.toBBOX();
            url += “&WIDTH=” + this.tileSize.w;
            url += “&HEIGHT=” + this.tileSize.h;
            return url;

        }

That is, live example you can see here http://www.sumbera.com/lab/wms/getcapWGS.htm

or in MapShake here : http://www.mapshake.cz/mapfs.aspx?i=464