Overlay WMS on Google in OpenLayers

[Note: therea are related post: overlyaing tiled WMS over the new Google Map v3 https://blog.sumbera.com/2010/11/02/tiled-wms-overlay-on-google-map-v3/ and overlying tiled WMS over the Silverlight Bing map https://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

This entry was posted in Code, MapBinder, MapShake, OpenLayers, WMS and tagged , , , , , , . Bookmark the permalink.

19 Responses to 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

  4. manu says:

    Which version of openlayers ? does the map server have to support tms?

    • manu says:

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

  5. marco says:

    Hey Stanislav,
    Great work! That helped me really a lot and prevented me from implementing a new class!
    Thanks

  6. sur says:

    Hi this is a great work !

    It would be great if you post an updated example with Google (v3) Layer.
    thank you

  7. You made my day !! Thank you for share.

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

  9. D. says:

    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

    • Stanislav says:

      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);

      }
      }
      );
      }
      }

      ********

      • D. says:

        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.

  10. nboisteault says:

    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.

  11. nboisteault says:

    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.

  12. Palo TT says:

    When trying to display lesni komunikace layer from OPRL UHUL WMS service http://www.uhul.cz/mapy-a-data/webove-sluzby I get very strange overlay. There was no problem on very old geoportal2 UHUL server.

    As described in article, square map view (1 tile 256×256) in EPSG:900913 is rectangular in EPSG:4326. But in every WMS request default openlayers WIDTH and HEIGHT is requested – square (256×256) and different WMS servers handle such a request in different ways:

    1. Some WMS servers return what the client is requesting = requested map view resized to 256×256. No expanding/shringing in browser takes place.

    2. Some servers ignore one dimension (WIDTH or HEIGHT) and returns rectangular map view
    (e.g. 256×160). In this case browser expand/shring the image.

    3. I found out, that UHUL WMS service instead of returning rectangular map view or resing map view just add some additional area to the map view in order to return square (256×256).
    The bounds of returned map view are not the same as bounds specified in request. Very strange. If you want to get correct result (returned bounds are same as requested bounds), WIDTH and HEIGHT must have correct ratio in each request. It can be done by adding following code:

    url += “&BBOX=” + bounds.toBBOX();
    boundsratio= (Math.abs(bounds.top – bounds.bottom))/(Math.abs(bounds.left-bounds.right));
    pheight=256;
    pwidth=Math.round(pheight/boundsratio);
    url += “&WIDTH=” +pwidth;
    url += “&HEIGHT=” +pheight;
    return url;

    In order to have a smooth map the request is for larger image and browser is shrinking the image. In nord of CZ the image size is 405×256. In south of CZ the image size is 388×256.

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