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

About these ads

18 thoughts on “Overlay WMS on Google in OpenLayers

  1. Pingback: Overlay WMS on Google in Silverlight Bing « Geospatial Haiku

  2. Pingback: Tiled WMS overlay on Google Map v3 « Geospatial Haiku

  3. Pingback: Wordpress 2010 auto-review of this blog « Geospatial Haiku

    1. manu

      this technique works perfectly in google api v2, but in v3 tiles just disappear. i tried also with bing and it works well too

      Reply
      1. sur

        Thank you for the updated link. It works well. I am looking for an openlayers solution where I can overly WMS, WFS, and TMS together on Googlemap API V3. The existin example is overlyed on googlemap API v2 layer. I have modified your example with someother example and now I managed to overlay all these in googlemap API V3 layer in Openlayers.
        Here is the Example link http://landuseky.uky.edu/gmapv3_wfs_wms_tms.html

        A have aother question? is there any way to overlay WFS in GML format in your Googlemap API V3 example ?
        http://blog.sumbera.com/2010/11/02/tiled-wms-overlay-on-google-map-v3/

        see this post regading WFS (GML)support for Googlemap API V2
        http://code.google.com/p/geoxml/issues/detail?id=47

  4. Pingback: Reprojecting non 4326 WMS image to spherical mercator | Q&A System

  5. D.

    Ahoj, prosim ta skvele riesenie, mas v openlayers pouzity google podklad a vyhladavaci formular. Vies mi poradit, ktoru cast javascriptov mam doplnit do suboru openlayers.js, aby mi to vyhladavanie fungovalo? Trapim sa s tym uz tyzden. Formular by som pouzil presne taky isty s rovnakym nazvom inputov, ako mas na tej testovacej adrese

    http://www.sumbera.com/lab/wms/getcapWGS.htm

    Ide mi len o vyhladavanie, na nete som sa k nicomu nedopatral, alebo neviem mozno co mam hladat.
    Dik za pomoc

    Reply
    1. Stanislav Post author

      viz zdrojovy kod http://www.sumbera.com/lab/wms/getcapWGS.htm

      ***
      geocoder = new OpenLayers.Control.Geocoder();
      map.addControl(geocoder);

      ****

      function showAddress(address) {
      if (geocoder) {
      geocoder.getLocation(
      address,
      function(lonlat) {
      if (!lonlat) {
      alert(address + ” not found”);
      } else {
      map.setCenter(lonlat, map.baseLayer.options.numZoomLevels-1, false, true);

      }
      }
      );
      }
      }

      ********

      Reply
      1. D.

        Dakujem za pomoc, toto som si v kode dokazal vycitat. Pridam to do mojho suboru, no mapy sa nezobrazuju. Subor geocoder.js sa vsak v stiahnutej verzii Openlayers nenachadzal v adresari controls, co nechapem. Pouzil som tento subor

        http://svn.openlayers.org/sandbox/topp/almanac/examples/geocoder.html

        Co este take by som mal spravit, aby to fungovalo? Je potrebne este daco stiahnut a pridat do suborov? Pripadne, kolko by ma stala implementacia vyhladavania do mojich Openlayers suborov (nemam nic nestandardne, len stiahnutu poslednu verziu OpenLayers) a pridane Google mapy a par vlastnych markrov.

  6. nboisteault

    Thank you very much!
    How do you handle getFeatureInfo with TMS layers? OpenLayers.Control.WMSGetFeatureInfo and OpenLayers.Control.WMTSGetFeatureInfo don’t send any request on TMS layers.

    Reply
  7. nboisteault

    For those who get the same issue, I have the get_wms_url callback called twice for every tile when I zoom/move the map.
    The only difference between the two requests are the ‘bounds’ object get the ‘centerLonLat’ property the second time.
    So I changed :
    bounds.transform(map.getProjectionObject(), proj);
    for
    if(!bounds.hasOwnProperty(‘centerLonLat’))
    bounds.transform(map.getProjectionObject(), proj);

    Hope it’ll help.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s